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内 容 简 介 


本 书 以 应 用 实例 和 综合 实战 案例 的 形式 逐一 详解 了 HTMLS5 网 页 设计 的 文档 结构 、 文 本 、 图 像 、 用 HTML5 
创建 超 链 接 、 表 格 、 使 用 表单 、HTMLS5 中 的 音频 和 视频 、HTMLS5 绘制 图 形 、 地 理 定 位 、 离 线 Web 应 用 、 用 
CSS3 设置 字体 与 段落 、 表 格 和 表单 的 样式 、 美 化 图 片 、 背 景 、 边框 和 用 CSS3+DIV 布局 页 面 、 jQuery Mobile UI 
组 件 、jQuery Mobile 事件 、 使 用 最 新 Bootstrap 4 框架、 开发 计算 器 、 开 发 求职 招聘 、 开 发 购物 网 站 和 开发 手 
机 游戏 等 内 容 。 

通过 对 本 书 实例 和 综合 案例 的 学 习 与 演练 ， 读 者 可 以 尽快 掌握 所 学 的 知识 ， 提 高 网 页 设计 的 实战 能 力 ， 同 
时 本 书 在 网 上 提供 了 实例 源 代 码 ， 可 供 读者 直接 查看 和 调用 ， 以 便 快 速 上 手 或 进行 二 次 开发 。 

本 书 内 容 丰 富 , 理论 结合 实践 , 适合 没有 任何 移动 网 站 和 开发 基础 的 初学 者 , 同时 也 可 作为 有 一 定 HTML5 
和 CSS3 基础 ， 想 精通 移动 网 站 和 开发 的 人 员 参 考 书 。 
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前 言 


由 于 原生 应 用 程序 的 开发 费用 比较 高 ， 时 间 也 比较 长 ， 因 此 jQuery Mobile 函数 库 的 出 现 
就 很 好 地 解决 了 这 个 问题 , 通过 HTMLS5 新 技术 和 jQuery Mobile 搭配 使 用 , 开发 出 的 网 站 与 普 
通 没 有 区 别 ， 受 到 广大 客户 的 欢迎 。 


本 书 内 容 

第 1 章 是 HIMLS 快速 入 门 。 包 括 HTML5 的 基本 概念 、HTMLS5 网 页 文档 结构 、HTML5 
文件 的 编写 方法 和 HTMLS5 语法 的 新 变化 。 

第 2 章 介 绍 HIMLS 网 页 中 的 文本 和 图 像 。 包 括 添加 文本 、 文 本 排版 、 文 字 列表 和 网 页 中 的 图 
像 等 。 

第 3 章 介绍 用 HTML5 建立 超 链接 。 包 括 URL 的 概念 、 超 链接 标记 、 创 建 热点 区 域 和 浮 
动 框架 iframe 等 。 

第 4 章 介绍 用 HIMLS 创建 表格 。 包 括 表格 基本 结构 及 操作 、 完 整 的 表格 标记 和 制作 计算 
机 标价 表 等 。 

第 5 章 介绍 使 用 表单 。 包 括 表 单 概述 、 表 单 基 本 元 素 和 表单 高 级 元 素 的 使 用 等 。 

第 6 章 介 绍 在 HIMLS 中 的 音频 和 视频 。 包 括 <audio> 和 <video> 标 记 等 。 

第 7 章 介绍 HIML5 绘制 图 形 。 包 括 canvas 概述 、 绘 制 基本 形状 、 绘 制 渐变 图 形 、 绘 制 变 
形 图 形 、 图 形 组 合 、 绘 制 带 阴影 的 图 形 、 使 用 图 像 、 绘 制 文字 及 图 形 的 保存 和 恢复 等 。 

第 8 章 介绍 地 理 定位 和 离线 Web 应 用 。 包 括 地 理 定位 、 离 线 Web 应 用 和 Web 存储 技术 。 

第 9 章 是 CSS3 快速 入 门 。 包 括 CSS3 基本 概念 、 编 写 与 浏览 CSS3， 以 及 在 HTMLS5 中 使 
用 CSS3 的 方法 。 

第 10 章 介绍 CSS3 中 文字 与 段落 属性 。 主 要 包括 字体 属性 、 文 本 高 级 样式 和 段落 属性 ， 
最 后 通过 两 个 综合 实例 进一步 讲述 了 如 何 设置 公司 标题 和 旅游 网 页 混 排 的 方法 和 技巧 。 

第 11 章 介绍 用 CSS3 设置 表格 和 表单 的 样式 。 包 括 表格 基本 样式 与 CSS3 和 表单 ， 并 通过 
5 个 综合 案例 ， 进 一 步 讲 述 表单 和 表格 样式 的 制作 方法 和 技巧 。 

第 12 章 介绍 CSS3 美化 图 片 。 主 要 包括 图 片 样式 、 图 片 的 对 齐 和 图 文 混 排 等 。 

第 13 章 介绍 CSS3 美化 背景 与 边框 。 主 要 包括 背景 相关 属性 、 边 框 、 圆 角 边 框 、 图 像 边 
框 和 边 距 ， 最 后 通过 一 个 综合 实例 进一步 讲述 了 如 何 制作 网 上 书店 圆 角 边 框 效果 。 

第 14 章 介绍 网 页 的 定位 与 布局 。 主 要 包括 定位 方式 、float 浮动 定位 、overflow 溢出 定位 、 
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visibility 隐藏 定位 、 块 和 行内 元 素 display、 定 位 布局 新 闻 页 面 。 

第 15 章 介绍 CSS3 盒子 和 DIV 布局 。 主 要 包括 认识 div 层 、 盒 子 模 型 、CSS3 新 增 弹性 盒 
模型 、 图 文 排版 效果 和 淘宝 导购 菜单 。 

第 16 章 介 绍 CSS3+DIV 页 面 基 本 排版 。 主 要 包括 CSS3 排版 概念 、 固 定 宽度 布局 、 新 增 
CSS3 多 列 布局 和 电子 企业 首页 。 

第 17 章 介 绍 jQuery Mobile。 主 要 包括 认识 jQuery Mobile、 跨 平台 移动 设备 网 页 jQuery 
Mobile、 创建 多 页 面 的 jQuery Mobile 网 页 、 将 页 面 作为 对 话 框 使 用 、 绚丽 多 彩 的 页 面 切 换 效 果 。 

第 18 章 介绍 jQuery Mobile UI 组件。 主要 包括 套用 UI 组件、 列表 、 面 板 和 可 折合 块 、 导 
航 条 、jQuery Mobile 主题 。 

第 19 章 介 绍 jQuery Mobile 事件 。 主 要 包括 页 面 事件 、 触 摸 事 件 、 滚 屏 事 件 和 定位 事件 。 

第 20 章 介绍 Bootstrap 4 框架 。 主 要 包括 Bootstrap 概述 、 下 载 Bootstrap、 安 装 Bootstrap、 
使 用 常用 组 件 、 胶 训导 航 选 项 卡 。 

第 21 章 介绍 开发 计算 机 的 项 目 实 训 。 

第 22 章 介绍 开发 求职 招聘 的 项 目 实 训 。 

第 23 章 介绍 开发 购物 网 站 的 项 目 实 训 。 

第 24 章 介绍 开发 游戏 的 项 目 实 训 。 


本 书 特 色 


知识 全 面 : 知识 由 浅 入 深 ,涵盖 了 所 有 HTML5、CSS3 和 jQuery Mobile 知识 点 ， 便 于 读 
者 循序 渐进 地 掌握 HTML5 +CSS3+jQuery Mobile 网 页 设计 技术 。 

图 文 并 茂 : 注重 操作 ， 图 文 并 茂 ， 在 介绍 案例 的 过 程 中 ， 每 一 个 操作 均 有 对 应 的 插图 。 这 
种 图 文 结合 的 方式 使 读者 在 学 习 过 程 中 能 够 直观 、 清 晰 地 看 到 操作 的 过 程 及 效果 ， 便 于 更 快 地 
理解 和 掌握 。 

易学 易 用 : 颠覆 传统 “看 ” 书 的 观念 ， 变 成 一 本 能 “操作 ”的 图 书 。 

案例 丰富 : 把 知识 点 融 汇 于 系统 的 案例 实 训 中 ， 并 且 结 合 经 典 案例 进行 讲解 和 拓展 ， 进 而 
达到 “ 知 其 然 ， 并 知 其 所 以 然 ” 的 效果 。 

贴心 周到 : 对 读者 在 学 习 过 程 中 可 能 会 遇 到 的 疑难 问题 以 “提示 ”和 “技巧 ”的 形式 进行 
了 说 明 ， 以 免 读 者 在 学 习 过 程 中 走 弯 路 。 

技术 支持 : 提供 了 实例 和 综合 案例 的 源 代码 ， 可 让 读者 在 实战 应 用 中 掌握 网 页 布局 的 每 一 
项 技能 ， 使 本 书 真正 体现 “自学 无 忧 ”， 成 为 一 本 物 超 所 值 的 好 书 。 

读者 可 加 入 QQ 群 : 941230971 向 作者 索要 源 代 码 、 教 学 幻灯 片 和 精品 教学 视频 。 


读者 对 象 


本 书 是 一 本 完整 介绍 HIML5+CSS3+jQuery Mobile 开发 的 教程 ， 内 容 丰 富 、 条 理 清 晰 、 实 
用 性 强 ， 适 合 如 下 读者 学 习 使 用 。 


没有 任何 移动 网 站 和 开发 基础 的 初学 者 。 
有 一 定 HTML5 和 CSS3 基础 ， 想 精通 移动 网 站 和 开发 的 人 员 。 
大 专 院 校 及 培训 学 校 的 老师 和 学 生 。 


代码 、 课 件 与 教学 视频 下 载 
本 书 代码 、 课 件 与 教学 视频 下 载 地 址 为 : https://share.weiyun.com/5vLUp8Q。 如 果 
下 载 有 问题 ， 请 联系 booksaga@163.com， 邮 件 主题 为 “H5C3MB 代码 ”。 
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目前 网 络 已 经 成 为 人 们 生活 中 不 可 缺少 的 一 部 分 , 网 页 设计 也 成 为 学 习 计算 机 的 重要 内 容 
之 一 。 制 作 网 页 可 采用 可 视 化 编辑 软件 ， 但 是 无 论 采 用 哪 一 种 网 页 编辑 软件 ， 最 后 都 是 将 所 设 
计 的 网 页 转化 为 HTML。 因 为 HTML 是 网 页 的 基础 语言 ， 所 以 本 章 就 先 来 介绍 HTML 的 基本 
概念 、 编 写 方法 及 浏览 HTML 文件 的 方法 ， 使 读者 初步 了 解 HTML， 从 而 为 后 面 的 学 习 打下 
基础 。 


1.1 HTML5 概述 


由 于 因特网 上 的 信息 是 以 网 页 的 形式 展示 给 用 户 的 ， 因此 网 页 是 网 络 信息 传递 的 载体 。 网 
页 文件 是 用 一 种 标记 语言 书写 的 ， 这 种 语言 称 为 HTML (Hyper Text Markup Language， 超 文本 
标记 语言 ) 。 

HTML 是 一 种 标记 语言 ， 而 不 是 一 种 编程 语言 ， 主 要 用 于 描述 超 文本 中 内 容 的 显示 方式 。 
标记 语言 从 诞生 到 今天 ， 经 历 了 十 几 载 ， 发 展 过 程 中 也 有 很 多 曲折 ， 经 历 的 版 本 及 发 布 日 期 如 
表 1-1 所 示 。 


表 1-1 HTML 经 历 的 版 本 


版 本 发 布 日 期 说 明 

超 文本 标记 语言 作为 互联 网 工程 工作 小 组 (IETF) 工作 草案 发 布 〈 并 非 标 
1993 年 6 月 

(第 一 版 ) 准 ) 

作为 RFC 1866 发 布 , 在 RFC 2854 于 2000 年 6 月 发 布 之 后 
被 宣布 已 经 过 时 

1996 年 1 月 14 日 | W3C (万 维 网 联盟 ) 推荐 标准 

1997 年 12 月 18 日 | W3C 推荐 标准 


HIML 4.01 1999 年 12 月 24 日 | 微小 改进 ，W3C 推荐 标准 


HIML 2.0 1995 年 11 月 
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( 续 表 ) 
发 布 日 期 说 明 
基于 严格 的 HTML 4.01 语法 ， 是 国际 标准 化 组 织 和 国际 电 
工 委 员 会 的 标准 
2000 年 1 月 26 日 | W3C 推荐 标准 , 后 来 经 过 修订 于 2002 年 8 月 1 日 重新 发 布 
2001 年 5 月 31 日 | 较 1.0 有 微小 改进 
没有 发 布 2009 年 ，W3C 停止 了 XHTML 2.0 工作 组 的 工作 
HIML5 2014 年 10 月 W3C 推荐 标准 


2000 年 5 月 15 日 


HTML 是 一 种 标记 语言 , 标记 语言 经 过 浏览 器 的 解释 和 编译 , 虽然 它 本 身 不 能 显示 在 浏览 
器 中 ， 但 在 浏览 器 中 可 以 正确 显示 HTML 标记 的 内 容 。HTML 语言 从 1.0~5.0 经 历 了 巨大 的 变 
化 ， 从 单一 的 文本 显示 功能 到 图 文 并 茂 的 多 媒体 显示 功能 ， 许 多 特性 经 过 多 年 的 完善 ， 已 经 成 
为 一 种 非常 成 熟 的 标记 语言 。 尤 其 是 HTML5， 对 多 媒体 的 支持 功能 更 强 ， 其 新 增 功能 如 下 : 


新 增 语义 化 标记 ， 使 文档 结构 明确 ; 
新 的 文档 对 象 模型 (DOM ) ; 

实现 2D 绘图 的 Canvas 对 象 ; 

可 控 媒 体 播放 ; 

离线 存储 ; 

文档 编辑 ; 

拖 放 ; 

跨 文档 消息 ; 

浏览 器 历史 管理 ; 

MIME 类 型 和 协议 注册 。 


对 于 这 些 新 功能 , 支持 HIML5 的 浏览 器 在 处 理 HTML 代码 错误 的 时 候 会 更 灵活 ， 而 那些 
不 支持 HIMLS 的 浏览 器 将 忽略 HIMLS 代码 。 

HTML5 不 是 一 种 编程 语言 ， 而 是 一 种 描述 性 的 标记 语言 ， 用 于 描述 超 文本 中 的 内 容 和 结 
构 。HTML 最 基本 的 语法 是 < 标记 符 ></ 标 记 符 >。 标 记 符 通常 都 是 成 对 使 用 ， 有 一 个 开头 标记 
和 一 个 结束 标记 。 结 束 标记 只 是 在 开头 标记 的 前 面 加 一 个 斜 本 “/”。 当 浏览 器 收 到 HTML 文 
件 后 ， 就 会 解释 里 面 的 标记 符 ， 然 后 把 标记 符 相 对 应 的 功能 表达 出 来 。 

如 在 HTML 中 用 <p></p> 标 记 符 来 定义 一 个 段落 , 用 <br> 标 记 符 来 定义 一 个 换行 符 。 当 浏 
览 器 遇 到 <p></p> 标 记 符 时 ， 会 把 该 标记 中 的 内 容 自动 形成 一 个 段落 。 当 遇 到 <br /> 标记 符 时 ， 


。2 。 
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会 自动 换行 ， 并 且 该 标记 符 后 的 内 容 会 从 一 个 新 行 开始 。 这 里 的 <br 人 标记 符 是 单 标记 ， 没 有 
结束 标记 ， 标 记 后 的 “/” 符 号 可 以 省 略 ， 为 了 规范 代码 ， 一 般 建议 加 上 。 


1.2 HTML5 的 文档 结构 
HTMLS 文档 最 基本 的 结构 主要 包括 文档 类 型 说 明 、 文 档 开始 标记 、 元 信息 、 主 体 标记 和 
页 面 注释 标记 。 
1.2.1 文档 类 型 说 明 


HTMLS5 设计 准则 中 最 重要 的 一 条 是 化 繁 为 简 ，Web 页 面 的 文档 类 型 说 明 (Doctype) 被 极 
大 地 简化 了 。 
在 HTML4 或 早期 的 版 本 中 ， 创 建 HTML 文档 时 ， 文 档 头 部 的 类 型 说 明代 码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtm11/DTD/xhtml1-transitional.dtd"> 


上 面 为 XHTML 文档 类 型 说 明 ， 读 者 可 以 看 到 这 段 代 码 既 麻 烦 又 难 记 ，HTMLS 对 文档 类 
型 进行 了 简化 ， 简 单 到 15 个 字符 就 可 以 了 ， 代 码 如 下 : 


<!DOCTYPE html> 


。 引 | Doctype 申明 需要 出 现在 HTML 文件 的 第 一 行 。 
枝 巧 得 示 


1.2.2 HTML 标记 


HTML 标记 代表 文档 的 开始 ， 由 于 HTML 语言 语法 的 松散 特性 ， 该 标记 可 以 省 略 ， 但 是 
为 了 使 之 符合 Web 标准 和 文档 的 完整 性 ， 用 户 要 养 成 良好 的 编写 习惯 ， 建 议 不 要 省 略 该 标记 。 

HTML 标记 以 <html> 开 头 ， 以 </html> 结 尾 ， 文 档 的 所 有 内 容 书 写 在 开头 和 结尾 的 中 间 部 
分 。 语 法 格式 如 下 : 


<html> 
ee 
1.2.3 ” 头 标 记 head 


头 标记 head 用 于 说 明文 档 头 部 相关 信息 ， 一 般 包括 标题 信息 、 元 信息 、 定 义 CSS 样式 和 
脚本 代码 等 。HTML 的 头 部 信息 是 以 <head> 开 始 ， 以 </head> 结 束 ， 语 法 格式 如 下 : 
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<head> 

本 
<head> 元 素 的 作用 范围 是 整 篇 文档 ， 定 义 在 HTML 文档 头 部 的 内 容 往往 不 会 在 网 
页 上 直接 显示. 

1. 标题 标记 title 

HTML 页 面 的 标题 一般 是 用 来 说 明 页 面 的 用 途 的 , 它 显示 在 浏览 器 的 标题 栏 中 。 在 HTML 
文档 中 ， 标 题 信息 设置 在 <head> 与 <head> 之 间 。 标 题 标记 以 <tidle> 开 始 ， 以 <ltitle> 结 束 ， 语 法 
格式 如 下 : 


<title> 


</title> 


在 标记 中 间 的 “... ”就 是 标题 的 内 容 ， 它 可 以 帮助 用 户 更 好 地 识别 页 面 。 预 览 网 页 时 ， 
设置 的 标题 在 浏览 器 的 左上 方 标题 栏 中 显示 (如 图 1-1 所 示 )。 页 面 的 标题 只 有 一 个 ,位 于 HIML 
文档 的 头 部 ， 即 <head> 和 </head> 之 间 。 


名 DA 源 代 码 WHTMI 图 ”已 搜索 


标题 标记 title 


图 1-1 标题 栏 在 浏览 器 中 的 显示 效果 


2. 元 信息 标记 meta 

<meta> 标 记 可 提供 有 关 页 面 的 元 信息 (meta-information) ， 比 如 针对 搜索 引擎 和 更 新 频 度 
的 描述 和 关键 词 。 

<meta> 标 记 位 于 文档 的 头 部 , 不 包含 任何 内 容 。<meta> 标 记 的 属性 定义 了 与 文档 相关 联 的 
名 称 / 值 ，<meta> 标 记 提供 的 属性 及 取 值 如 表 1-2 所 示 。 


4. 
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表 1-2 <meta> 标 记 提供 的 属性 及 取 值 


描述 
charset character encoding 定义 文档 的 字符 编码 
content some text 定义 与 http-equiv 或 name 属性 相关 的 元 信息 
content-type 
expires 
http-equiv 把 content 属性 关联 到 HTTP 头 部 


refresh 


set-cookie 


author 


description 


keywords 


把 content 属性 关联 到 一 个 名 称 


generator 
revised 


others 


(1) 字符 集 charset 属性 
在 HTML5 中 有 一 个 新 的 charset 属性 ， 它 使 字符 集 的 定义 更 加 容易 。 例 如 ， 下 列 代码 告诉 
浏览 器 ， 网 页 使 用 “ISO-8859-1” 字 符 集 显示 。 


<meta charset="ISO-8859-1"> 


(2) 搜索 引擎 的 关键 字 
在 早期 ，meta keywords 关键 字 对 搜索 引擎 的 排名 算法 起 到 一 定 的 作用 ， 也 是 很 多 人 进行 
网 页 优化 的 基础 。 关 键 字 在 浏览 时 是 看 不 到 的 ， 使 用 格式 如 下 : 


<meta name="keywords" content=" 关 键 字 ,keywords" /> 


说 明 : 
@ 不 同 的 关键 字 之 间 应 用 半角 各 号 隔 开 (英文 输入 状态 下 ) ， 不 要 使 用 “空格 ”或 “|” 
间隔 ; 


是 keywords， 不 是 keyword; 
关键 字 标 签 中 的 内 容 应 该 是 一 个 个 的 短语 ， 而 不 是 一 段 话 。 


例如 ， 定 义 针对 搜索 引擎 的 关键 词 ， 代 码 如 下 : 
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<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" /> 


关键 字 标 记 Keywords， 曾 经 是 搜索 引擎 排名 中 很 重要 的 因素 ， 但 现在 已 经 被 很 多 搜索 引 
擎 完全 忽略 。 如 果 我 们 加 上 这 个 标记 对 网 页 的 综合 表现 没有 坏处 , 不 过 , 如 果 使 用 不 恰当 的 话 ， 
对 网 页 非但 没有 好 处 ， 还 有 欺诈 的 嫌疑 。 在 使 用 关键 字 标 记 Keywords 时 ， 要 注意 以 下 几 点 : 


@ 关键 字 标 记 中 的 内 容 要 与 网 页 核心 内 容 相关 ， 确 信使 用 的 关键 词 出 现在 网 页 文本 
中 。 

@ 使 用 用 户 易 于 通过 搜索 引擎 检索 的 关键 字 ， 过 于 生僻 的 词汇 不 太 适 合 做 meta 标 
记 中 的 关键 字 。 

@ 不 要 重复 使 用 关键 字 ， 否 则 可 能 会 被 搜索 引 党 惩罚 。 
一 个 网 页 的 关键 字 标记 里 最 多 包含 3~5 个 最 重要 的 关键 字 ， 不 要 超过 5 个 。 
每 个 网 页 的 关键 字 应 该 不 一 样 。 


由 于 设计 者 或 SEO 优化 者 以 前 对 Meta Keywords 关键 字 的 滥用 ， 导 致 目前 它 在 搜 
ER 示 引 擎 排名 中 的 作用 很 小 


(3) 页 面 描述 

meta description〈 描 述 元 标记 ) 是 一 种 HTML 元 标记 ， 用 来 简略 描述 网 页 的 主要 内 容 ， 通 
常 被 搜索 引擎 用 于 搜索 结果 页 上 展示 给 最 终 用 户 看 的 一 段 文字 片段 。 页 面 描述 在 网 页 中 是 不 显 
示 出 来 ， 页 面 描述 的 使 用 格式 如 下 : 


<meta name="description" content=" 网 页 的 介绍 " /> 

例如 ， 定 义 对 页 面 的 描述 ， 代 码 如 下 : 

<meta name="description" content=" 免 费 的 Web 技术 教程 。" /> 

(4) 页 面 定时 跳 转 

使 用 <meta> 标 记 可 以 使 网 页 在 经 过 一 定时 间 后 自动 刷新 ， 可 以 通过 将 http-equiv 属性 值 设 
置 为 refresh 来 实现 。content 属性 值 可 以 设置 为 更 新 时 间 。 

在 浏览 网 页 时 经 常会 看 到 一 些 欢迎 信息 的 页 面 ,在 经 过 一 段 时 间 后 ,， 这些 页 面 会 自动 转 到 
其 他 页 面 ， 这 就 是 网 页 的 跳 转 。 页 面 定时 刷新 跳 转 的 语法 格式 如 下 : 


<meta http-equiv="refresh" content=" 秒 ; [url= 网 址 ]" /> 


说 明 : 上 面 的 “[url= 网 址 ]” 部 分 是 可 选项 ， 如 果 有 这 部 分 ， 则 页 面 定 时 刷新 并 跳 转 ， 如 
果 省 略 该 部 分 ， 则 页 面 只 定时 刷新 ， 不 进行 跳 转 。 
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例如 ， 实 现 每 5 秒 刷新 一 次 页 面 ， 将 下 述 代码 放 入 head 标记 部 分 即 可 。 
<meta http-equiv="refresh" content="5" /> 


1.2.4 网 页 的 主体 标记 body 


网 页 所 要 显示 的 内 容 都 放 在 网 页 的 主体 标记 内 ， 它 是 HIML 文件 的 重点 所 在 ， 后 面 章节 
所 要 介绍 的 HTML 标记 都 将 放 在 这 个 标记 内 。 然 而 它 并 不 仅仅 是 一 个 形式 上 的 标记 ， 它 本 身 
也 可 以 控制 网 页 的 背景 颜色 或 背景 图 像 ， 这 会 在 后 面 进行 介绍 。 主 体 标 记 是 以 <body> 开始 ， 
以 </body> 结 束 ， 语 法 格式 如 下 : 


<body> 
</body> 


注意 ， 在 构建 HTML 结构 时 ， 标 记 不 允许 交错 出 现 ， 否 则 会 造成 错误 。 

例如 ， 在 下 列 代码 中 ，<body> 开 始 标记 出 现在 <head> 标 记 内 。 

<html> 

<head> 

<title> 标 记 测试 </title> 

<body> 

</head> 

</body> 

</html> 

代码 中 的 第 4 行 <body> 开 始 标 记 和 第 5 行 的 </head> 结 束 标记 出 现 了 交叉 ， 这 是 错误 的 。 
HTML 中 的 所 有 标记 都 是 不 允许 交错 出 现 的 。 


1.2.5 ”页 面 注释 标记 <!-- --> 


注释 是 在 HIML 代码 中 插入 的 描述 性 文本 ， 用 来 解释 该 代码 或 提示 其 他 信息 。 注 释 只 出 
现在 代码 中 ， 浏 览 器 对 注释 代码 不 进行 解释 ， 并 且 在 浏览 器 的 页 面 中 不 显示 。 在 HTML 源 代 
码 中 适当 地 插入 注释 语句 是 一 种 非常 好 的 习惯 。 对 于 设计 者 日 后 的 代码 修改 、 维 护 工作 很 有 好 
处 。 另外， 如 果 将 代码 交 给 其 他 设计 者 ， 其 他 人 也 能 很 快 读 懂 前 者 所 撰写 的 内 容 。 

语法 格式 如 下 : 


<!-- 注 释 的 内 容 --> 


注释 语句 元 素 有 前 后 两 半 部 分 ， 前 半 部 分 由 一 个 左 尖 括 号 、 一 个 半角 感叹 号 和 两 个 连 字符 
组 成 ， 后 半 部 分 由 两 个 连 字符 和 一 个 右 尖 括 号 组 成 。 
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<html> 

<head> 
<title> 标 记 测 试 </title> 
</head> 

<body> 

<!-- 这 里 是 标题 --> 
<h1>HTML5 从 入 门 到 精通 </h1> 
</body> 

</html> 


页 面 注释 不 但 可 以 对 HTML 中 一 行 或 多 行 代码 进行 解释 说 明 ， 而 且 还 能 注释 掉 这 些 代码 。 
如 果 希 望 某 些 HTML 代码 在 浏览 器 中 不 显示 ， 则 可 以 将 这 部 分 内 容 放 在 <!-- 和 --> 之 间 , 例如 修 


改 上 述 代 码 : 


<html> 

<head> 
<title> 标 记 测试 </title> 
</head> 


--> 
</body> 
</html> 


修改 后 的 代码 ， 将 <h1> 标 记 作为 注释 内 容 处 理 ， 在 浏览 器 中 将 不 会 显示 这 部 分 内 容 。 


1.3 HTML5 文件 的 编写 方法 


有 两 种 方式 来 产生 HIML 文件 : 一 种 是 自己 写 HTML 文件 ， 事 实 上 这 并 不 是 很 困难 ， 也 
不 需要 特别 的 技巧 ， 另 一 种 是 使 用 HTML 编辑 器 ， 它 可 以 辅助 使 用 者 来 做 编写 的 工作 。 


1.3.1 使 用 记事 本 手工 编写 HTML 文件 


前 面 介绍 到 HTMLS 是 一 种 标记 语言 ， 标 记 语言 代码 是 以 文本 形式 存在 的 ， 因 此 所 有 的 记 
事 本 工具 都 可 以 作为 它 的 开发 环境 。HTML 文件 的 扩展 名 为 .html 或 htm， 将 HTML 源 代码 输 
入 到 记事 本 并 保存 之 后 ， 可 以 在 浏览 器 中 打开 文档 以 查看 其 效果 。 

使 用 记事 本 编写 HTML 文件 ， 具 体操 作 步骤 如 下 : 


@ 则 单 击 Windows 菏 面 上 的 【开始 〗 按 钮 ， 选 择 【 所 有 程序 】 汪 【附件 】〗>【 记 事 本 】 
命令 ， 打 开 一 个 记事 本 ， 在 记事 本 中 输入 HTML 代码 ， 如 图 1-2 所 示 。 
上 @22 编辑 完 HIML 文件 后 ， 选 择 【 文 件 】〗】> 【保存 】 命 令 或 按 Ctrl+S 组 合 键 ， 在 弹出 的 
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【另存 为 〗】 对 话 框 中 选择 【保存 类 型 】 为 【所 有 文件 】 并 将 文件 扩展 名 设 为 .html 或 .htm， 如 


图 1-3 所 示 。 
国 记 和 本 尝 写 HTML 文 件 txt -记事 本 - Oo x em» 
文件 (名 纺 ( 格式 0) 三 看 NV】 于 二 + 
IDOCTYPE html> sn- ee 0 
tsb pe “a 
[ttle> 第 一 个 网 页 </title> mn 
K/head> 
Cbody> uk 
路 入 南 中 ， 桃 样 叶 晴 机 花红 。 两岸 人 家 微 肌 后 ， 收 红豆 ， 树 底 纤 纤 拍 素 手 。 
/body> 
Whtml> es 
> Wino 
| a 
ra ERP | 
Some RR 
二 ~ na pm ms Cas] ww 
图 1-2 编辑 HTML 代码 图 1-3 【另存 为 】 对 话 框 


t@ 介 单 击 【保存 】 按 钮 ， 保 存 文件 。 打 开 网 页 文档 在 下 浏览 器 中 预览 效果 ， 如 图 1-4 
所 示 。 


I 意 _DA 理 到 whOTViD 事 3 图 ” 吃 | 搜索 - pp- 
[Eee x 回 

文 #(P 器 (查看 V】 收 划 夫 (A) 工具 (加 RH) 

育 公 百 恬 一 下 体 350 惠 
路 入 南 中 ， 桃 性 叶 障 : 


红 。 两 岸 人 家 微 雨 后 ， 收 红豆 ， 树 底 纤纤 拍 素 手 . 


图 1-4 网 页 的 浏览 效果 


1.3.2 ”使 用 Dreamweaver CC 编写 HTML 文件 

常言 道 : “ 工 欲 善 其 事 ， 必 先 利 其 器 ”。 虽 然 使 用 记事 本 可 以 编写 HTML 文件 ， 但 是 编 
写 效率 太 低 ， 对 于 语法 错误 及 格式 都 没有 提示 ， 因 此 可 以 使 用 专门 编写 HTML 网 页 的 工具 来 
弥补 这 种 缺陷 。Adobe 公司 的 Dreamweaver CC 用 户 界 面 十 分 友好 ， 是 一 款 非常 优秀 的 网 页 开 


发 工具 ， 深 受 广大 用 户 的 喜爱 。 
使 用 Dreamweaver CC 编写 HIML 文件 ， 有 具体 操作 步骤 如 下 : 


IO 册 启动 Dreamweaver CC (如 图 1-5 所 示 ), 在 欢迎 屏幕 的 【新 建 〗 栏 中 选择 HTML 选项 ， 
或 者 执行 菜单 中 的 【文件 〗>【 新 建 〗 命 令 (快捷 键 CtrlHN) 。 

I@ 到 弹出 【新 建文 档 】〗 对 话 框 ( 如 图 1-6 所 示 )， 在 【页 面 类 型 〗 选 项 区 中 选择 HTML 选 
项 , 【文档 类 型 〗 选 择 【HIML5】 选 项 。 
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DW 交加 四 二 曙 关机 合同 好 轴 和 加 证 四 的 四 和 天 加 


A 


ER 


有 ar 机 本 
图 1-5 包含 欢迎 屏幕 的 主 界面 图 1-6 “新 建文 档 ” 对 话 框 


I@3j 单 击 【创建 】 按 钮 ， 创 建 HIML 文件 ， 如 图 1-7 所 示 。 
t@ 细 在 文档 工具 栏 中 单 击 【 代 码 】 按 钮 ， 切 换 到 代码 视图 ， 如 图 1-8 所 示 。 


DW mm- 0- Sr Bi [=lol x ] 
I] ma EI MA WAM) KOI So) wels) CW WD 


拆 分 | 设计 “实时 视图 ， 哆 , @, 绚 .p24 
<!ldoctype html> 

<html> 

<head> 

<meta charset="utf-8"> 


me 
代表 | 折 分 设计] 实时 杭 目 ! 哆 访 胎 成 人 局 


<title> 无 标题 文档 </title> 


| 


EB Ea 
Ovum 精 吉 (和) 元 
hcss DD 天 


图 1-7 设计 视图 下 显示 创建 的 文件 图 1-8 ”代码 视图 下 显示 创建 的 文件 


@@ 国 修改 HIML 文件 标题 ， 将 代码 <title> 标 记 中 的 “无 标题 文档 ”修改 成 “ 蝶 恋 花 。 
t@gj 在 <body> 标 记 中 键入 “ 溪 上 平 岗 千 登 以， 万 树 亭 享 ， 争 作 竺 云 势 。， 完 整 的 HIML 
代码 如 下 所 示 。 


<!DOCTYPE html> 

<head> 

<meta charset=utf-8" /> 
<title> 第 一 个 网 页 </title> 
</head> 

<body> 

溪 上 平 岗 干 琶 愉 ， 万 树 亭 享 ， 争 作 爸 云 势 。 
</body> 

</html> 


[0 天 保存 文件 。 执 行 菜单 中 的 【文件 】> 【保存 】 命 令 或 按 Ctrl+S 组 合 键 ， 弹 出 【另存 
为 】 对 话 框 ， 选 择 保 存 位 置 并 输入 文件 名 ， 单 击 【 保 存 】 按 钮 ， 如 图 1-9 所 示 。 
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{@ 副 单 击 文档 工具 栏 的 力图 标 ， 或 者 按 下 功能 键 F12 使 用 默认 浏览 器 查看 网 页 ， 预览 
效果 如 图 1-10 所 示 。 


在: [于 全 ageov 到 口 x 
ee i i ,|e 蛋 “Dx\ 源 代码 chOT\Drear 图 ”| 搜索 .… 
El 个 晓 丰 花 x 局 
局 文件 (P) 编辑 (6 查看 (V) 收藏 夫 (A) 工具 (T) 帮助 (H) 
起 堵 当 百 度 一 下 ,你 就 知道 
.| | 溪 上 平 岗 千 登 翠 ， 万 树 享 享 ， 争 作 笃 云 势 。 

feat 区 ] CE 

图 1-9 保存 文件 图 1-10 浏览 器 预览 效果 


1.4 HTML5 语法 的 新 变化 
为 了 兼容 各 个 不 统一 的 页 面 代码 ，HTMLS5 的 设计 在 语法 方面 做 了 以 下 变化 。 
1.4.1 标签 不 再 区 分 大 小 写 
标签 不 再 区 分 大 小 写 是 HIML5 语法 变化 的 重要 体现 。 例 如 : 


<!DOCTYPE html> 

<html> 

<head> 

<title> 不 再 区 别 大 小 写 标签 </title> 
</head> 

<BODY> 

人 到 情 多 情 转 薄 ， 而 今 真 个 不 多 情 。 
</body> 

</html> 


在 正 11.0 浏览 器 中 预览 ， 效 果 如 图 1-11 所 示 。 


- ODO x 
和 丫 ”D’ 源 代码 \chO1\1.1.ht 国 ~ 中 搜索. 

和 扎 不 再 区 别 大 小 写 标签 x 加 

文件 (F) 编辑 (6) 查看 (V) 收藏 夫 (A) 工具 (T) 帮助 (H) 


育 强 百 度 一 下 ,你 就 知道 
人 到 情 多 情 转 薄 ， 而 今 真 个 不 多 情 。 


图 1-11 网 页 预览 效果 
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虽然 “<BODY> 人 到 情 多 情 转 薄 ， 而 今 真 个 不 多 情 。</body>” 中 开始 标记 和 结束 标记 不 
匹配 ， 但 是 这 完全 符合 HTMLS 的 规范 。 用 户 可 以 通过 W3C 提供 的 在 线 验 证 页 面 来 测试 上 面 
的 网 页 ， 验 证 网 址 为 http://validator.w3.org/。 


1.4.2 ”允许 属性 值 不 使 用 引号 
在 HTML5 中 ， 属 性 值 不 放 在 引号 中 也 是 正确 的 。 例 如 以 下 代码 片段 : 


<input checked="a" type="checkbox"/> 
<input readonly type="text"/> 
<input disabled="a" type="text"/> 


上 述 代 码 片 段 与 下 面 的 代码 片段 效果 是 一 样 的 : 


<input checked=a type=checkbox/> 
<input readonly type=text/> 
<input disabled=a type=text/> 


注意 ， 尽 管 HTML5 允许 属性 值 可 以 不 使 用 引号 ， 但 是 仍然 建议 读者 加 上 引号 。 因 为 如 果 
某 个 属性 的 属性 值 中 包含 空格 等 , 则 很 容易 引起 混淆 的 属性 值 , 此 时 可 能 会 引起 浏览 器 的 误解 。 
例如 以 下 代码 : 


<img src=ss ch01/1.1.jpg /> 

此 时 浏览 器 就 会 误 以 为 src 属性 的 值 就 是 ss， 这样 将 无 法 解析 路 径 中 的 01jpg 图 片 。 如 果 
想 正 确 解析 到 图 片 的 位 置 ， 就 只 有 添加 上 引号 。 
1.4.3 ”允许 部 分 属性 值 的 属性 省 略 

在 HIML5 中 ， 部 分 标志 性 属性 的 属性 值 可 以 省 略 。 例 如 以 下 代码 是 完全 符合 HTMLS5 规 
则 的 : 


<input checked type="checkbox"/> 
<input readonly type="text"/> 


其 中 checked="checked" 省 略为 checked， 而 readonly="readonly" 省 略为 readonly。 
在 HIML5 中 ， 可 以 省 略 属性 值 的 属性 如 表 1-3 所 示 。 
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表 1-3 可 以 省 略 属性 值 的 属性 
省 略 属性 值 


省 略 属性 值 后 ， 等 价 于 checked="checked" 
省 略 属 性 值 后 ， 等 价 于 readonly="readonly" 


省 略 属 性 值 后 ， 等 价 于 defer="defer" 


省 略 属性 值 后 ， 等 价 于 ismap="ismap" 
省 略 属性 值 后 ， 等 价 于 nohre 全 "nohref" 


省 略 属 性 值 后 ， 等 价 于 noshade="noshade" 


省 略 属性 值 后 ， 等 价 于 nowrap="nowrap" 
省 略 属性 值 后 ， 等 价 于 selected="selected" 
省 略 属性 值 后 ， 等 价 于 disabled="disabled" 
| maltiple | 省 略 属性 值 后 ， 等 价 于 multiple=wultiple' 
省 略 属性 值 后 ， 等 价 于 noresize="noresize" 


1.5 专家 解 惑 


问题 1 : 如 何 理 解 HTML5 中 的 单 标记 和 双 标 记 书写 方法 ? 

HTMLS5 中 的 标记 分 为 单 标记 和 双 标 记 。 所 谓 单 标记 是 指 没 有 结束 标记 的 标记 ， 双 标记 是 
指 既 有 开始 标记 又 包含 结束 标记 。 

对 于 不 允许 写 结束 标记 的 单 标记 元 素 ， 只 可 以 使 用 “< 元 素 户 ” 的 形式 进行 书写 。 例 如 
“<br>.…</br>” 的 书写 方式 是 错误 的 ， 正 确 的 书写 方式 为 <br />。 当 然 ， 在 HTML5 之 前 的 版 
本 中 <br> 这 种 书写 方法 可 以 被 沿用 。HTMLS 中 不 允许 写 结束 标记 的 元 素 有 area、base、br 、 
col、 command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr。 

对 于 部 分 双 标 记 可 以 省 略 结束 标记 .HTML5 中 允许 省 略 结 束 标记 的 元 素 有 li、dt、dd、p、 
rnt、 rm、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th。 

HIML5 中 有 些 元 素 还 可 以 完全 被 省 略 标记 ， 即 使 这 些 标记 被 省 略 了 ， 该 元 素 还 是 以 隐 式 
的 方式 存在 的 。HTMLS5 中 允许 省 略 全 部 标记 的 元 素 有 html、head、body、colgroup、tbody。 

问题 2 : 为 何 使 用 记事 本 编辑 HTML 文件 无 法 在 浏览 器 中 预览 ， 而 是 直接 在 记事 本 
中 打开 ? 

很 多 初学 者 在 保存 文件 时 ， 没 有 将 HTML 文件 的 扩展 名 .html 或 .htm 作为 文件 的 后 级 ， 导 


HTML5+CSS3+jQuery Jmobile+Bootstrap 开发 APP 从 入 门 到 精通 〈 视 频 教 学 版 ) 


致 文件 还 是 以 .txt 为 扩展 名 ， 因 此 无 法 在 浏览 器 中 查看 。 如 果 读 者 是 通过 单 击 右 键 创建 记事 本 
文件 的 ， 那 么 在 给 文件 重 命 名 时 一 定 要 以 html 或 .htm 作为 文件 的 后 缀 。 特 别 要 注意 的 是 ， 当 
Windows 系统 的 扩展 名 是 隐藏 时 ， 更 容易 出 现 这 样 的 错误 。 读 者 可 以 在 【文件 夹 选项 】 对 话 杠 
中 设置 是 否 显示 扩展 名 。 

问题 3 : 在 网 页 中 ， 语 言 的 编码 方式 有 哪些 ? 

在 HIMLS 网 页 中 ，<meta> 标 记 的 charset 属性 用 于 设置 网 页 的 内 码 语系 ， 也 就 是 字符 集 
的 类 型 ， 国 内 常用 的 是 GB 码 ， 通 常设 置 为 “GB2312” (简体 中 文 ) 和 “UTF-8” 两 种 。 英 文 
是 “ISO-8859-1” 字 符 集 ， 此 外 还 有 其 他 的 字符 集 ， 这 里 不 再 介绍 。 
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文本 和 图 像 是 网 页 中 非常 重要 且 经 常 使 用 的 元 素 ， 本 章 将 讲解 如 何在 网 页 中 使 用 文本 、 文 
本 结构 标记 及 图 像 的 方法 。 


2.1 添加 文本 
网 页 中 的 文本 可 以 分 为 两 大 类 : 一 类 是 普通 文本 ， 另 一 类 是 特殊 字符 文本 。 


2.1.1 普通 文本 


所 谓 普通 文本 是 指 汉字 或 在 键盘 上 可 以 输出 的 字符 。 读 者 可 以 在 Dreamweaver CC 代码 视 
图 的 <body> 标 记 部 分 直接 输入 ， 或 者 在 设计 视图 下 直接 输入 。 

如 果 有 现成 的 文本 ， 则 可 以 使 用 复制 的 方法 把 其 他 窗口 中 需要 的 文本 复制 过 来 。 在 粘贴 文 
本 的 时 候 ， 如 果 只 希望 把 文字 粘贴 过 来 ， 而 不 需要 粘贴 其 文档 中 的 格式 ， 则 可 以 使 用 
Dreamweaver CC 的 “选择 性 粘贴 ”功能 。 

“选择 性 粘贴 ”功能 只 在 Dreamweaver CC 的 设计 视图 中 起 作用 ， 因 为 在 代码 视图 中 ， 粘 
贴 的 仅 是 文本 ， 不 会 有 格式 。 例 如 ， 将 Word 文档 表格 中 的 文字 复制 到 网 页 中 ， 而 不 需要 表格 
结构 ， 其 操作 方法 为 : 执行 【编辑 】>【 选 择 性 粘贴 】 命令 或 按 快捷 键 ShiftkCtrlHV， 弹 出 【 选 
择 性 粘贴 】 对 话 框 ， 选 中 【 仅 文 本 】 单 选 按钮 ， 如 图 2-1 所 示 。 


选择 性 粘贴 x 
人 
圈 仅 文本 (T) 

O 〇 带 结构 的 文本 《段落 、 列 表 、 表 格 等 ) (S) 取消 (C) 


〇 带 结构 的 文本 以 及 基本 格式 〈 粗 体 、 冬 体 ) (B) 
O 〇 带 结构 的 文本 以 及 全 部 格式 〈 粗 体 、 幸 体 、 样 式 ) (F) 
保留 换行 符 (R 
清理 Yord 段落 间距 (L) 
口 将 智能 引号 转换 为 直 引 号 (o) 
粘贴 董 选 参数 (P). . 


帮助 (8) 


图 2-1 【选择 性 粘贴 】 对话 框 
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2.1.2 ”特殊 文字 符号 


目前 ， 很 多 行业 上 的 信息 都 出 现在 网 络 上 ， 每 个 行业 都 有 自己 的 行业 特性 ， 如 数学 、 物 理 
和 化 学 都 有 特殊 的 符号 。 如 何在 网 页 上 显示 这 些 特 殊 字 符 是 本 小 节 将 要 讲述 的 内 容 。 

在 HIML 中 ， 特 殊 字符 以 “&” 开 头 ， 以 “; ”结尾 ， 中 间 为 相关 字符 编码 。 例 如 ， 大 括 
号 和 小 括号 被 用 于 声明 标记 ， 因 此 如 果 在 HTML 代码 中 出 现 “<” 和 “>” 符 号 ， 就 不 能 直接 
输入 了 ， 需 要 当 作 特殊 字符 处 理 。 在 HTML 中 ， 用 “&lt，” 代 表 符号 “<”， 用“&gt; ” 代 
表 符 号 “>”。 如 输入 公式 a>b， 在 HIML 中 需要 这 样 表 示 : a&gtb。 

HTML 中 还 有 大 量 这 样 的 字符 ， 如 空格 、 版 权 等 。 常 用 特殊 字符 如 表 2-1 所 示 。 


表 2-1 常用 特殊 字符 


om 


在 编辑 化 学 公式 或 物理 公式 时 ， 使 用 特殊 字符 的 频 度 非 常 高 。 如 果 每 次 输入 时 都 去 查询 或 
者 要 记忆 这 些 特殊 特 号 的 编码 ， 那 么 工作 量 是 相当 大 的 ， 在 此 作者 为 读者 提供 了 以 下 技巧 : 


(1) 在 Dreamweaver CC 的 设计 视图 下 输入 字符 ,如 输入 a>b 这 样 的 表达 式 。 对 于 部 分 键 
盘 上 没有 的 字符 可 以 借助 “中 文 输入 法 ”的 软 键盘 。 在 中 文 输入 法 的 软 键盘 上 单 击 鼠 标 右键 ， 
弹出 特殊 类 别 项 (如 图 2-2 所 示 ) ， 选 择 所 需 类 型 ， 如 选择 “数学 符号 ”， 弹 出 数学 相关 符号 
(如 图 2-3 所 示 ) ， 单 击 “ 二 ”按钮 即 可 输入 。 
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| PC 证 笃 标点 符号 
项 肝 字母 数字 序号 
全 六 字母 数学 符号 
注音 符号 单位 符号 
拼音 制 表 罕 
昌文 假名 。 | 特殊 符号 
日 文 片 假 名 


图 2-2 特殊 符号 分 类 


图 2-3 数学 符号 


(2) 文字 与 文字 之 间 的 空格 ， 如 果 超 过 一 个 ， 就 从 第 2 个 空格 开始 ， 都 会 被 忽略 掉 。 快 
捷 地 输入 空格 的 方法 如 下 : 将 输入 法 切换 成 “中 文 输入 法 ”， 并 置 于 “全 角 ” 〈Shift+ 空 格 ) 


状态 ， 直 接 按 键盘 上 的 空格 键 即 可 。 


(3) 对 于 上 述 两 种 方法 都 无 法 实现 的 字符 ， 可 以 使 用 Dreamweaver CC 的 【插入 】 菜 单 实 
现 。 选 择 【 插 入 】>HTML>【 特 殊 字 符 】 菜 单 命令 ， 在 所 需要 的 字符 中 选择 ， 如 果 没 有 所 需 


要 的 字符 ， 就 选择 【 划 


他 字符 】 选 项 。 


尽量 不 要 使 用 多 个 “&nbsp” 来 表示 多 个 空 格 ， 因 为 多 数 浏览 器 对 空格 的 距离 实现 


ES 是 不 一 样 的 。 


2.1.3 ”文本 特殊 样式 


在 文档 中 经 常会 出 现 重要 文本 (加 粗 显示 ) 、 倾 斜 文本 、 上 标 和 下 标 文本 等 。 


1. 重要 文本 


重要 文本 通常 以 粗 体 显示 、 强 调 方式 显示 或 加 强调 方式 显示 ，HTML 中 的 <b> 标 记 、<em> 
标记 和 <strong> 标 记分 别 用 来 实现 这 三 种 显示 方式 。 


【 例 2.1】〔 实 例文 件 : ch022.1.html) 
<!DOCTYPE html> 


<html> 
<head> 


<title> 无 标题 文档 </title> 


</head> 
<body> 


<!--<b> 标 记 、<em> 标 记 和 <strong> 标 记 --> 
<p><b> 我 是 粗 体 文字 </b> </p> 
<p><em> 我 是 强调 文字 </em> </p> 
<p><strong> 我 是 加 强调 文字 </strong></p> 


</body> 
</html> 
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在 正 11.0 中 预览 效果 如 图 2-4 所 示 ， 实 现 了 文本 的 三 种 显示 方式 。 


- 0O x 
司 “D:\ 本 书 源 代 码 code\ 江 国 ”搜索 .… 

夺 无 标题 文档 x 四 

文件 (F) 编辑 (日 、 查 看 (V) 收藏 夫 (A) 工具 (T) 帮助 (H) 

请 和 百度 一 下 ,你 宫 知 首 

我 是 粗 体 文字 

琵 赴 器 易 交 字 

我 是 加 强调 文字 


图 2-4 重要 文本 预览 效果 


2. 倾斜 文本 
HTML 中 的 < 这 标记 实现 了 文本 的 倾斜 显示 。 放 在 <i></ 记 之 间 的 文本 将 以 斜体 显示 。 


【 例 2.2】 (实例 文件 :ch02\2.2.html) 
<!DOCTYPE html> 

<html> 

<head> 

<title> 无 标题 文档 </title> 
</head> 

<body> 

<i> 我 将 会 以 斜体 字 显 示 </i> 

</body> 

</html> 


在 正 11.0 中 预览 效果 如 图 2-5 所 示 ， 其 中 文字 以 斜体 显示 。 


= 口 x 
@ 名“D+\ 本 书 源 代码 code 国 ~ 上 
局 无 标题 文档 x | 
文件 (F) 编辑 (日 ”查看 (V) 收藏 赤 (A) 工具 (T) ” 
育 各 百度 一 下 , 你 就 知道 


死 准 会 以 竹 亿 完 显 元 


图 2-5 ”倾斜 文本 预览 效果 


HTML 中 的 重要 文本 和 倾斜 文本 标记 已 经 过 时 ,是 需要 读者 忘记 的 标记 , 这些 标 记 

都 应 该 使 用 CSS 样式 来 实现 . 随 着 后 面 学 习 的 深入 , 读者 会 逐渐 发 现 , 即使 HTML 
和 CSS 实现 相同 的 效果 ， 但 是 CSS 所 能 实现 的 控制 远 远 比 HTML 要 细致 、 精 确 得 
we 
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3. 上 标 和 下 标 文 本 


在 HTML 中 用 <sup> 标 记 实 现 上 标 文字 ， 用 <sub> 标 记 实 现下 标 文字 。<sup> 和 <sub> 都 是 
双 标 记 ， 放 在 开始 标记 和 结束 标记 之 间 的 文本 会 分 别 以 上 标 或 下 标 形式 出 现 。 


【 例 2.3】 《实例 文件 : ch02\2.3.html) 
<!DOCTYPE html> 

<html> 

<head> 

<title> 无 标题 文档 </title> 

</head> 

<body> 

<!-- 上 标 显示 --> 
<p>c=a<sup>2</sup>+b<sup>2</sup></p> 
<!-- 下 标 显示 --> 
<p>H<sub>2</sub>+0>H<sub>2</sub>0</p> 
</body> 
</html> 


在 卫 11.0 中 预览 效果 如 图 2-6 所 示 ， 分 别 实现 了 上 标 和 下 标 文本 显示 。 


x 
间 “D:\ 本 书 源 代码 vcodev 国 ~ 上 

展 无 标题 文档 x | 

文件 (F) 编辑 (日 ”查看 (V) 收藏 夫 (A) 工具 (T) 》 

次 尖 百度 下， 你 就 知道 


c=a2+b2 


H2+0 一 H20 


图 2-6 上 标 和 下 标 预 览 效果 


2.2 文本 排版 


在 网 页 中 ， 如 果 要 把 文字 都 合理 地 显示 出 来 ， 就 离 不 开 段 落 标记 的 使 用 。 对 网 页 中 文字 段 
落 进行 排版 ， 并 不 像 文本 编辑 软件 Word 那样 可 以 定义 许多 模式 来 安排 文字 的 位 置 。 在 网 页 中 
要 让 某 一 段 文字 放 在 特定 的 地 方 是 通过 HIML 标记 来 完成 的 。 


2.2.1 换行 标记 <br> 与 段落 标记 <p> 
浏览 器 在 显示 网 页 时 , 完全 按照 HTML 标记 来 解释 HTML 代码 , 忽略 多 余 的 空格 和 换行 。 


。19 。 
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在 HIML 文件 中 ， 不 管 输入 多 少 空格 〈 按 空格 键 ) 都 将 被 视 为 一 个 空格 ， 换 行 〈 按 Enter 键 ) 
也 是 无 效 的 。 在 HIML 中 ， 换 行使 用 <br> 标 记 ， 换 段 使 用 <p> 标 记 。 

1. 换行 标记 <br/> 

换行 标记 <br> 是 一 个 单 标记 ， 它 没有 结束 标记 ， 是 英文 单词 break 的 缩写 ， 作 用 是 将 文字 
在 一 个 段 内 强制 换行 。 一 个 <br> 标 记 代表 一 个 换行 ， 连 续 的 多 个 标记 可 以 实现 多 次 换行 。 
使 用 换行 标记 时 ， 在 需要 换行 的 位 置 添加 <br> 标 记 即 可 。 例 如 ， 下 面 的 代码 实现 了 对 文本 
的 强制 换行 。 


【 例 2.4】“〈 实 例文 件 : ch02\2.4html) 

<!DOCTYPE html> 

<html> 

<head> 

<title> 文 本 段 换行 </title> 

</head> 

<body> 

本 节目 标 <pr/> 网 页 中 的 文字 是 如 何 设置 的 <br/> 如 何在 Dreamweaver 中 处 理 文字 <br/> 如 何 对 
文本 进行 格式 化 (CSS) <br/> 熟 悉 使 用 Dreamweaver 进 行 样式 表 的 创建 与 应 用 

</body> 

</html> 


虽然 在 HTML 源 代码 中 ， 主 体 部 分 的 内 容 在 排版 上 没有 换行 ， 但 是 增加 <br/> 标 记 后 ， 在 
下 11.0 中 预览 效果 如 图 2-7 所 示 ， 实 现 了 换行 效果 。 


- 0O x 
@ 疗 ”D:\ 本 书 源 代码 \code 诺 图 ”人 搜索 .. 
生 文本 段 接 行 x 四 

文件 (F) 编辑 (5) 查看 (V) 收藏 夫 (A) 工具 (T) 帮助 (H) 
请 全 百度 一 下 ， 你 知道 

本 节目 标 

网 页 中 的 文字 是 如 何 设置 的 

如 何在 Dreamweaver 中 处 理 文字 

如 何 对 文本 进行 格式 化 〈CSS) 

熟悉 使 用 Dreamweaver 进 行 样式 表 的 创建 与 应 用 


图 2-7 换行 标记 的 使 用 
2. 段落 标记 <p> 
段落 标记 是 双 标 记 , 即 <p></p>, 在 <p> 开 始 标记 和 </p> 结 束 标记 之 间 的 内 容 形成 一 个 段落 。 
如 果 省 略 结束 标记 ， 就 从 <p> 标 记 开 始 ， 直 到 遇见 下 一 个 段落 标记 之 前 的 文本 ， 都 在 一 段 段落 


内 。 段 落 标记 中 的 p 是 英文 单词 paragraph (段落 ) 的 首 字母 ， 用 来 定义 网 页 中 的 一 段 文本 ， 文 
本 在 一 个 段落 中 会 自动 换行 。 
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【 例 2.5】 (实例 文件 ， ch02\2.5html) 

<!DOCTYPE html> 

<html> 

<head> 

<title> 段 落 标 记 的 使 用 </title> 

</head> 

<body> 

<p>HTML5、CSS3 应 用 教程 之 与 DIV 说 Bey!Bey!</p> 

<p>Web 设 计 师 可 以 使 用 HTML4 和 CSS2 .1 完成 一 些 很 酷 的 东西 。 我 们 可 以 在 不 使 用 陈旧 的 基于 glt:; 
table &gt; 布 局 的 基础 上 完成 文档 逻辑 结构 并 创建 内 容 丰 富 的 网 站 .我们 可 以 在 不 使 用 内 联 g1lt; font 
&gt; 和 &lt; br &gt; 标 记 的 基础 上 对 网 站 添加 漂亮 而 细腻 的 风格 样式 。 事实 上 ， 我 们 目前 的 设计 能 力 
已 经 让 我 们 远离 了 那个 可 怕 的 浏览 器 战争 时 代 、 专 有 协议 和 那些 充满 内 动 、 滚 动 和 闪烁 的 丑陋 网 页 。 

<P> 

<P> 

虽然 我 们 现在 已 经 普遍 使 用 了 HTML4 和 css2 .1， 但 是 我 们 还 可 以 做 得 更 好 ! 我 们 可 以 重组 代码 的 
结构 并 能 让 页 面 代码 更 富有 语义 化 特性 。 我 们 可 以 缩减 带 给 页 面 美丽 外 观 样式 的 代码 量 并 让 它们 有 更 高 
的 可 扩展 性 。 现 在 ，HTML5 和 CSS3 正 跃跃欲试 地 等 待 大 家 ， 下 面 就 让 我 们 来 看 看 它们 是 否 真 的 能 让 我 们 
的 设计 提升 一 个 高 度 吧 。 

</p> 

<p> 

曾经 ， 设 计 师 们 经 常会 频繁 使 用 基于 glt; table ggt; 的 没有 任何 语义 的 布局 。 不 过 最 终 还 是 要 
感谢 像 Jeffrey Zeldman 和 Eric Meyer 这 样 的 思想 革新 者 ， 聪 明 的 设计 师 们 慢 慢 地 接受 了 相对 更 语 
义 化 的 lt; div ggt; 布 局 替代 了 glt; table &gt; 布 局 并 且 开 始 调用 外 部 样式 表 。 但 不 幸 的 是 ， 
复杂 的 网 页 设计 需要 大 量 不 同 的 标记 结构 代码 ， 我 们 把 它 叫 作 “&1lt; div ggt; -soup” 综合 症 。 

</p> 

</body> 

</html> 


在 正 11.0 中 预览 效果 如 图 2-8 所 示 ，<P> 标 记 将 文本 分 成 4 个 段落 。 


= 口 Xx 
@ ee (AE 只 - ® 
总 纲 委 村 2 的 使 用 

文件 (F) 编 贺 (F) 查看 (V) Un 工具 (T) 帮助 (H) 

各 百 匡 一 下 ,你 SW90 天 
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Web 设 计 师 可 以 使 用 HTML4 和 css2. 1 完成 一 些 很 酷 的 东西 。 我 们 可 以 在 不 使 用 陈旧 的 基于 < table > 
布局 的 基础 上 完成 文档 逻辑 结构 并 创建 内 容 丰 富 的 网 站 。 我 们 可 以 在 不 使 用 内 联 < font > 和 < br 
> 标记 的 基础 上 对 网 站 添加 漂亮 而 细 肛 的 风 赂 样式 。 事 : 我 们 目前 的 设计 能 力 已 经 让 我 们 远离 
了 那个 可 怕 的 浏览 器 战争 时 代 、 专 有 协议 和 那些 充满 动 和 闪烁 的 丑陋 网 页 。 


虽然 我 们 现在 已 经 普遍 使 用 了 HTML4 和 Css2. 1， 但 是 我 们 还 可 以 做 得 更 好 ! 我 们 可 以 重组 我 们 代码 
的 结构 并 能 让 我 们 的 页 面 代码 更 富有 语义 化 特性 ， 我 们 可 以 缩减 带 给 页 面 美丽 外 观 样式 代码 量 并 
让 他 们 有 更 高 的 可 扩展 性 .现在 ， HTML3 和 CSS3 正 跃跃欲试 的 等 待 大 家 ， 下 面 让 我 们 来 看 看 他 们 是 
香 真 的 能 让 我 们 的 设计 提升 到 下 一 个 高 度 吧 


曾经 ， 设 计 师 们 经 常会 跟 频 繁 使 用 基于 《 table > 的 六 没有 任何 语 语义 的 布局 。 不 过 最 终 还 是 要 感谢 像 
Jeffrey Zeldman 和 Eric Meyer 这 样 的 思想 区 明 的 们 慢 慢 的 接受 了 相对 更 语义 化 的 
《 div > 布局 替代 了 < table > 布局 ， 并 且 开 部 样式 表 但 不 幸 的 是 ， 复 杂 的 网 页 设计 需 
要 大 量 不 同 的 标记 结构 代码 ， 我 们 把 它 叫做 “< div ” 综合 症 - 


图 2-8 段落 标记 的 使 用 
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2.2.2 ”标题 标记 <h1> 一 <h6> 


在 HIML 文档 中 ， 文 本 的 结构 除了 以 行 和 段 出 现 之 外 ， 还 可 以 作为 标题 存在 。 通 常 一 篇 
文档 最 基本 的 结构 就 是 由 若干 不 同 级 别 的 标题 和 正文 组 成 的 。 

HTML 文档 中 包含 有 各 种 级 别 的 标题 ， 各 种 级 别 的 标题 由 <h1> 到 <h6> 元 素来 定义 ，<hl> 
至 <h6> 标 题 标记 中 的 字母 h 是 英文 headline〈 标 题 行 ) 的 简称 。 其 中 <h1> 代 表 1 级 标题 ， 级 别 
最 高 ， 文 字 也 最 大 ， 其 他 标题 元 素 依次 递减 ，<h6> 级 别 最 低 。 


【 例 2.6】 《实例 文件 ，ch02\2.6.html) 
<!DOCTYPE html> 

<html> 

<head> 
<title> 文 本 段 换行 </title> 
</head> 

<body> 

<h1> 这 里 是 1 级 标题 </h1> 
<h2> 这 里 是 2 级 标题 </h2> 
<h3> 这 里 是 3 级 标题 </h3> 
<h4> 这 里 是 4 级 标题 </h4> 
<h5> 这 里 是 5 级 标题 </h5> 
<h6> 这 里 是 6 级 标题 </h6> 
</body> 

</html> 


在 正 11.0 中 预览 效果 如 图 2-9 所 示 。 


Do 


和 DA\ 丰 书 小 (Bcode 迷 轩 || 搜索 
后 文 各行 “ 

文件 (P 六 二 (日 音 看 (V) 收藏 天 (A】 工具 (1) 帮助 (H) 
育 各 百度 下 , 你 和 0 瑟 


这 里 是 1 级 标题 
这 里 是 2 级 标题 
这 里 是 3 级 标 是 


这 里 是 4 级 标题 
这 里 是 5 级 标题 


这 里 时 6 加 标 时 


图 2-9 标题 标记 的 使 用 


著者 作为 标题 ， 它 们 的 重要 性 是 有 区 别 的 ， 其 中 <h1> 标 题 的 重要 性 最 高 ，<h6> 的 最 低 。 
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2.3 文字 列表 
文字 列表 可 以 有 序 地 编排 一 些 信息 资源 , 使 其 结构 化 和 条 理化 , 并 以 列表 的 样式 显示 出 来 ， 


以 便 浏 览 者 能 更 加 快捷 地 获得 相应 信息 。HTML 中 的 文字 列表 如 同文 字 编辑 软件 Word 中 的 项 
目 符号 和 自动 编号 。 


2.3: 


标识 。 


个 列 
使 用 


1 建立 无 序列 表 <ul> 


无 序列 表 相 当 于 Word 中 的 项 目 符号 ， 无 序列 表 的 项 目 排列 没有 顺序 ， 只 以 符号 作为 分 项 
无 序列 表 使 用 一 对 标记 <ul></ul>， 其 中 每 一 个 列表 项 使 用 <li></li>， 其 结构 如 下 所 示 : 


<ul> 
<1i> 无 序列 表 项 </1i> 
<1i> 无 序列 表 项 </1i> 
<1i> 无 序列 表 项 </1i> 
<1i> 无 序列 表 项 </1i> 


</ul> 

在 无 序列 表 结 构 中 ， 使 用 <ul></ul> 标 记 表 示 这 一 个 无 序列 表 的 开始 和 结束 ，<li> 则 表示 一 
表 项 的 开始 。 在 一 个 无 序列 表 中 可 以 包含 多 个 列表 项 ， 并 且 <li> 可 以 省 略 结束 标记 。 下 面 
无 序列 表 实 现 文本 的 排列 显示 。 


【 例 2.7】 “实例 文件 ，ch02\2.7.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 嵌 套 无 序列 表 的 使 用 </title> 
</head> 


<body> 
<h1> 网 站 建设 流程 </h1> 
<ul> 
<1i> 项 目 需 求 </1i> 
<1i> 系统 分 析 
<ul> 
<1i> 网 站 的 定位 </1i> 
<1i> 内 容 收集 </1i> 
<1i> 栏 目 规划 </1i> 
<1i> 网 站 目录 结构 设计 </1i> 
<1i> 网 站 标志 设计 </1i> 
<1i> 网 站 风格 设计 </1i> 
<1i> 网 站 导航 系统 设计 </1i> 
</ul> 
</1i> 
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<1i> 伪 网 页 草图 
<ul> 
<1i> 制作 网 页 草图 </1i> 
<1i> 将 草图 转换 为 网 页 </1i> 
</ul> 
< 
<1i> 站 点 建设 </1i> 
<1i> 网 页 布局 </1i> 
<1i> 网 站 测试 </1i> 
<1i> 站 点 的 发 布 与 站 点 管理 </1i> 
</ul> 
</body> 
</html> 


在 下 11.0 中 预览 效果 如 图 2-10 所 示 。 读 者 会 发 现 ， 无 序列 表 项 中 可 以 网 套 一 个 列表 ， 如 
代码 中 的 “系统 分 析 ” 列 表 项 和 “ 伪 网 页 草图 ”列表 项 中 都 有 下 级 列表 ， 因 为 在 这 对 <li></li> 
标记 间 又 增加 了 一 对 <ul></ul> 标 记 。 


| 间 DA 本 书 尝 人 t 克 \code 计 图 ”人 | 搜索- Pp- 
| 说 闪 天 者 的 但 用 x 四 

文件 (F) 篇 加 (E) 查看 (V) 收藏 夫 (A) 工具 [帮助 (H) 

全 百度 一 下 ， 作 SC 
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网 站 的 定位 

。 内 容 收 集 

。 栏 目 规划 

。 网 站 目录 结构 设计 


- 仿 网 页 草 国 
-= 制作 网 页 草图 
图 转换 为 网 页 


。 网 
。 站 点 的 发 布 与 站 点 管理 


图 2-10 无 序列 表 


2.3.2 ”建立 有 序列 表 <ol> 


有 序列 表 类 似 于 Word 中 的 自动 编号 功能 ， 有 序列 表 的 使 用 方法 和 无 序列 表 的 使 用 方法 基 
本 相同 ， 它 使 用 标记 <ol></ol>， 每 一 个 列表 项 使 用 <li></li>。 每 个 项 目 都 有 前 后 顺序 之 分 ， 通 
常用 数字 表示 ， 其 结构 如 下 : 


<ol> 
<1i> 第 1 项 </1i> 
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<1i> 第 2 项 </1i> 
<1i> 第 3 项 </1i> 
</o1> 


实例 使 用 有 序列 表 实 现 文本 的 排列 显示 。 


【 例 2.8】 《实例 文件 : ch02\2.8.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 有 序列 表 的 使 用 </title> 

</head> 

<body> 

<h1> 本 讲 目 标 </h1> 

<ol> 
<1i> 网 页 的 相关 概念 </1i> 
<1i> 网 页 与 HTML</1i> 
<1i> Web 标 准 〈 结 构 、 表 现 、 行 为 ) </1i> 
<1i> 网 页 设计 与 开发 的 过 程 </1i> 
<1i> 与 设计 相关 的 技术 因素 </1i> 
<1i> HTML 简 介 </1i> 

</ol1> 

</body> 

</html> 


在 下 11.0 中 预览 效果 如 图 2-11 所 示 。 读 者 可 以 看 到 新 添加 的 有 序列 表 。 


- 0O x 
闻 ”D 人 \ 本 书 源 代码 \code 泊 图 ~ 搜索 .… 

层 有 序列 表 的 使 用 x 上 

文件 (F) 编辑 (E) 查看 (V) 收藏 失 (A) 工具 (T) 帮助 (H) 

请 沼 百度 一 下 ， 你 就 知道 


本 讲 目标 


.网 页 的 相关 概念 
网 页 与 HTML 


;开发 的 过 程 
与 设计 相 关 的 技术 因素 


1 
2 
3. 
4 
5 
6 HTML 简 介 


图 2-11 有 序列 表 的 效果 


2.4 网 页 中 的 图 像 <img> 


俗话 说 “一 图 胜 千 言 ”， 图 片 是 网 页 中 不 可 缺少 的 元 素 ， 巧 妙 地 在 网 页 中 使 用 图 片 可 以 为 
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网 页 增色 不 少 。 网 页 支持 多 种 图 片 格式 ， 并 且 可 以 对 插入 的 图 片 设置 宽度 和 高 度 。 


2.4.1 网 页 中 支持 的 图 片 格式 


图 像 在 网 页 中 具有 画龙点睛 的 作用 ， 它 能 装饰 网 页 ， 表 达 个 人 的 情调 和 风格 。 但 在 网 页 上 
加 入 的 图 片 不 宜 过 多 ， 否 则 浏览 的 速度 就 会 受到 影响 导致 用 户 失去 耐心 而 离开 页 面 。 网 页 中 使 
用 的 图 像 可 以 是 GIF、JPEG、BMP、TIFF、PNG 等 格式 的 图 像 文 件 ， 其 中 使 用 最 广泛 的 是 GIF 
和 JPEG 两 种 格式 。 

GIF 格式 是 由 Compuserve 公司 提出 的 与 设备 无 关 的 图 像 存 储 标准 ,也 是 Web 上 使 用 最 早 、 
应 用 最 广泛 的 图 像 格式 .GIF 是 通过 减少 组 成 图 像 每 个 像素 的 存储 位 数 和 LZH 压缩 存储 技术 来 
降低 图 像 文件 大 小 的 。GIF 格式 最 多 只 能 是 256 色 的 图 像 。 在 低 颜 色 数 下 ，GIF 比 JPEG 装载 
的 更 快 ， 可 用 许多 具有 同样 大 小 的 图 像 文 件 组 成 动画 。 在 GIF 图 像 中 可 指定 透明 区 域 ， 使 图 像 
有 具有 非 同 一 般 的 显示 效果 。 

JPEG 格式 是 在 目前 Internet 中 最 受 欢迎 的 图 像 格 式 。JPEG 可 支持 多 达 16M 颜色 , 能 展现 
十 分 丰富 生动 的 图 像 ， 还 能 压缩 ， 但 压缩 方式 是 以 损失 图 像 质 量 为 代价 ， 压 缩 比 越 高 图 像 质量 
损失 越 大 ， 图 像 文 件 也 就 越 小 。 

当 网 页 中 需要 载 入 一 个 较 大 的 GIF 或 JPEG 图 像 文件 时 ， 装 载 速度 会 很 慢 。 为 改善 网 页 的 
视觉 效果 ， 可 在 载 入 时 设置 为 隔行 扫描 。 隔 行 扫描 在 显示 图 像 开 始 看 起 来 非常 模糊 ， 接 着 细节 
逐渐 添加 上 去 直到 图 像 完全 显示 出 来 。 

GIF 是 支持 透明 、 动 画 的 图 片 格式 ， 但 色彩 只 有 256 色 。JPEG 是 一 种 不 支持 透明 和 动画 
的 图 片 格式 ， 但 色彩 模式 比较 丰富 ， 可 以 保留 大 约 1670 万 种 颜色 。 


现在 网 页 中 也 有 很 多 PNG 格式 的 图 片 .PNG 图 片 具有 不 失真 . 兼 有 GIF 和 JPEG 
EREEE 的 色彩 模式 、 网 络 传输 速度 快 、 支 持 透 明 图 像 的 制作 的 特点 ， 近 年 来 在 网 络 中 
很 流行 。 


2.4.2 ”使 用 路 径 


HTML 文档 支持 文本 、 图 片 、 声 音 、 视 频 等 媒体 格式 ， 但 是 在 这 些 格式 中 ， 除 了 文本 是 写 
在 HIML 中 的 ， 其 他 都 是 嵌入 式 的 ，HIML 文档 只 记录 了 这 些 文件 的 路 径 。 这 些 媒体 信息 能 
否 正 确 显 示 ， 路 径 至 关 重 要 。 

路 径 的 作用 是 定位 一 个 文件 的 位 置 。 文 件 的 路 径 可 以 有 两 种 表述 方法 : 以 当前 文档 为 参照 
物 表 示 文 件 的 位 置 ， 即 相对 路 径 ， 以 根 目 录 为 参照 物 表示 文件 的 位 置 ， 即 绝对 路 径 。 

为 了 方便 讲述 绝对 路 径 和 相对 路 径 ， 可 参考 如 图 2-12 所 示 的 目录 结构 。 


26°* 
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E 盘 


webs 


pages | sounds |[ scripts ] | styles | [as | 


b.html 


图 2-12 目录 结构 


1. 绝对 路 径 

例如 ， 在 卫 盘 Webs 目录 下 的 images 中 有 一 个 tpjpg 图 像 ， 它 的 路 径 就 是 E:\Webs\imags\ 
tpjpg， 像 这 种 完整 地 描述 文件 位 置 的 路 径 就 是 绝对 路 径 。 如 果 将 图 片 文件 tp.jpg 插入 到 网 页 
index.html， 绝 对 路 径 表 示 方式 如 下 : 


E:\Webs\imags\tp.jpg 


如 果 使 用 了 绝对 路 径 E:\Webs\imags\tp.jpg 进行 图 片 链接 ， 那 么 在 本 地 电脑 中 将 一 切 正常 ， 
因为 在 E\Webs\imags 下 确实 存在 tpjpg 这 个 图 片 。 如 果 将 文档 上 传 到 网 站 服务 器 之 后 ， 就 不 
正常 了 ， 因 为 服务 器 给 你 划分 的 存放 空间 可 能 在 三 盘 其 他 目录 中 ， 也 可 能 在 D 盘 其 他 目录 中 ， 
为 了 保证 图 片 正 常 显示 ， 必 须 从 Webs 文件 夹 开 始 ， 放 到 服务 器 或 其 他 电脑 的 E 盘 根 目录 下 。 

通过 上 述 讲解 读者 会 发 现 , 当 链接 本 站 点 内 的 资源 时 , 使 用 绝对 路 径 对 位 置 要 求 非常 严格 ， 
因此 链接 本 站 内 的 资源 不 建议 采用 绝对 路 径 。 如 果 链 接 其 他 站 点 的 资源 , 则 必须 使 用 绝对 路 径 。 

2. 相对 路 径 

如 何 使 用 相对 路 径 设置 上 述 图 片 呢 ? 所 谓 相对 路 径 ， 顾 名 思 义 就 是 以 当前 位 置 为 参考 点 ， 
自己 相对 于 与 目标 的 位 置 。 例 如 ， 在 index.html 中 连接 tpjpg 就 可 以 使 用 相对 路 。index.html 
和 tpjpg 图 片 的 路 径 根据 上 述 目录 结构 图 可 以 这 样 来 定位 。 从 index.html 位 置 出 发 , 它 和 images 
属于 同 级 ， 路 径 是 通 的 ， 因 此 可 以 定位 到 images，images 的 下 级 就 是 印 jpg。 使 用 相对 路 径 表 
示 图 片 如 下 : 


images/tp.jpg 


使 用 相对 路 径 ， 不 论 将 这 些 文件 放 到 哪里 ， 只 要 tpjpg 和 index.html 文件 的 相对 关系 没有 
变 ， 就 不 会 出 错 。 
在 相对 路 径 中 ，“..” 表 示 上 一 级 目录 ，“../..” 表 示 上 级 的 上 级 目录 ， 依 此 类 推 。 例 如 ， 
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将 tpjpg 图 片 插入 到 ahtml 文件 中 ， 使 用 相对 路 径 表 示 如 下 : 


--/images/tp.jpg 


细心 的 读者 会 发 现 ， 路 径 分 隔 符 使 用 了 “Ww 和 “/” 两 种 ， 其 中 “\” 表示 本 地 分 隔 
ES 符 ，“/” 表 示 网 络 分 隔 符 。 因 为 网 站 制作 好 肯定 是 在 网 络 上 运行 的 ， 所 以 要 求 使 
用 “/” 作 为 路 径 分 隔 符 。 
有 的 读者 可 能 会 有 这 样 的 疑惑 : 一 个 网 站 有 许多 链接 ， 怎 么 能 保证 它们 的 连接 都 正确 ? 如 
果 调 整 了 一 下 图 片 或 网 页 的 存储 路 径 ， 那 不 是 全 乱 了 吗 ?如何 提 高 工作 效率 呢 ? 


.XX_ Dreamweaver 工具 的 站 点 管理 功能 ， 不 但 可 以 将 绝对 路 径 自动 地 转化 为 相对 路 径 ， 
5 本 并 且 当 在 站 点 中 改动 文件 路 径 时 ， 与 这 些 文件 关联 的 连接 路 径 都 会 自动 更 改 。 


2.4.3 网 页 中 插入 图 像 标记 <img> 
图 像 可 以 美化 网 页 ， 插 入 图 像 使 用 单 标记 <img>。<img> 标 记 的 属性 及 描述 如 表 2-2 所 示 。 
表 2-2 ”<img> 标 记 的 属性 及 描述 


定义 鼠标 放置 在 图 像 上 的 文本 提示 
把 图 像 定 义 为 服务 器 端的 图 像 映射 
把 图 像 定义 为 客户 端的 图 像 映 射 。 请 参阅 <map> 和 <area> 标记 ， 了 解 其 
工作 原理 
定义 图 像 项 部 和 底部 的 空白 。 不 推荐 使 用 ， 请 使 用 CSS 代替 
设置 图 像 的 宽度 


1. 图 像 的 源 文件 src 
src 属性 用 于 指定 图 片 源 文件 的 路 径 ， 它 是 <img> 标 记 必 不 可 少 的 属性 。 语 法 格式 如 下 : 


title text 


Usemap URL 


vspace 


pixels % 


<img src=" 图 片 路 径 "> 


图 片 的 路 径 可 以 是 绝对 路 径 ， 也 可 以 是 相对 路 径 。 下 面 的 实例 是 在 网 页 中 插入 图 片 。 
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【 例 2.9】〔 实 例文 件 : ch02\2.9.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 插 入 图 片 </title> 
</head> 

<body> 

<img src="images/meishi.jpg"> 
</body> 

</html> 


在 正 11.0 中 预览 效果 如 图 2-13 所 示 。 


闭 DA 本 书 涯 代码 YcodeW 轿 -已 | 搜索 - 
| 号 十 和 如 片 了 
文件 (P) 六 辑 (E) 到 看 IV) 收藏 赤 (A) 工具 (D) 帮助 (H) 
育 各 百 反 一 下 , 730 下 


图 2-13 插入 图 片 


2. 设置 图 像 的 宽度 width 和 高 度 height 
在 HTML 文档 中 ， 还 可 以 设置 插入 图 片 的 显示 大 小 ， 一 般 是 按 原始 尺寸 显示 ， 但 也 可 以 
任意 设置 显示 尺寸 。 设 置 图 像 尺寸 分 别 用 属性 width (宽度) 和 height (高度 ) 。 


【 例 2.10】”“〔 实 例文 件 ， ch02\2.10.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 插 入 图 片 </title> 

</head> 

<body> 

<! 一 原始 图 像 、 设 置 宽度 为 200 和 设置 宽度 为 200、 高 度 为 300--> 
<img src="images/meishi.jpg"> 

<img src="images/meishi.jpg" width="200"> 


<img src="images/meishi.jpg" width="200" height="300"> 
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</body> 
</html 


在 正 11.0 中 预览 效果 ， 如 图 2-14 所 示 。 


全 DYEARRNcode 尖 fchaZ21Ohtml 
EE a 

KAN WHY EV muxlA) TAM) RO(H) 
| 


图 2-14 设置 图 片 的 宽度 和 高 度 


由 图 2-14 可 以 看 到 ， 图 片 的 显示 尺寸 是 由 width 宽度) 和 height (高 度 ) 控制 的 。 当 只 
为 图 片 设置 一 个 尺寸 属性 时 ， 另 外 一 个 尺寸 就 以 图 片 原始 的 长 宽 比 例 来 显示 。 图 片 的 尺寸 单位 
可 以 选择 百分比 或 数值 。 百 分 比 为 相对 尺寸 ， 数 值 是 绝对 尺寸 。 


因为 网 页 中 插入 的 图 像 都 是 位 图 ， 所 以 放大 尺寸 ， 图 像 会 出 现 马 赛 克 ， 变 得 模糊 。 
EREE 在 Windows 中 查看 图 片 的 尺寸 ， 只 需要 找到 图 像 文件 ， 把 饼 标 指针 移动 到 图 像 上 ， 


停留 几 秒 后 ， 就 会 出 现 一 个 提示 框 ， 说 明 图 像 文件 的 尺寸 。 尺 寸 后 显示 的 数字 ， 代 


表 图 像 的 宽度 和 高 度 ， 如 256 x 256。 


3. 设置 图 像 的 提示 文字 alt 


在 浏览 网 页 时 ， 图 像 提 示 文 字 的 作用 有 两 个 : 一 是 如 果 图 像 下 载 完成 ， 将 鼠标 指针 放 在 该 
图 像 上 ， 鼠 标 指针 旁边 就 会 出 现 提示 文字 ; 二 是 如 果 图 像 没有 成 功 下 载 ， 在 图 像 的 位 置 上 就 会 


显示 提示 文字 。 
随 着 互联 网 技术 的 发 展 ， 网 速 已 经 不 是 制约 


因素 ， 


因此 一 般 都 能 成 功 下 载 图 像 。 现 在 ，alt 


还 有 另外 一 个 作用 ， 在 百度 、google 等 大 搜索 引擎 中 ， 搜 索 图 片 不 如 文字 方便 ， 如 果 给 图 片 添 


加 适当 提示 ， 就 可 以 方便 搜索 引擎 的 检索 。 
下 面 实例 为 图 片 添加 提示 文字 效果 。 


【 例 2.11】 《实例 文件 : ch02\2.11.html) 


<!DOCTYPE html> 
<html> 
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<head> 

<title> 图 片 文字 提示 </title> 

</head> 

<body> 

<!-- 添 加 提示 文字 效果 --> 

<img src="images/meishi.jpg" alt=" 未 加 载 完成 时 显示 的 奉 代 文 字 "” tit1le=" 鼠 标 放 上 
去 显示 的 文字 "> 

</body> 

</html> 


在 下 11.0 中 预览 效果 如 图 2-15 所 示 。 用 户 将 鼠标 放 在 图 片上 ， 即 可 看 到 提示 文字 。 


辣 DA 不 书 涛 ft 码 Ycode 详 图 ”人 | 搜索 | 
屋 图 片 文子 提示 和 
文人 (编辑 (6 查看 (V) 收 茂 突 (A) 工具 (D 帮助 (H) 


诊 沁 百度 一 下 ， 人 FSL50 才 


图 2-15 ”图片 文字 提示 
注意 ， 在 火狐 浏览 器 中 不 支持 该 功能 。 
2.5 ”综合 实例 一 一 图 文 并 茂 房屋 装饰 装修 网 页 


本 章 讲述 了 网 页 组 成 元 素 中 最 常用 的 文本 和 图 片 。 本 综合 实例 的 目的 是 创建 一 个 由 文本 和 
图 片 构成 的 房屋 装饰 效果 网 页 (如 图 2-16 所 示 ) ， 具 体操 作 步 又 如 下 : 


罗 则 在 Dreamweaver CC 中 新 建 HIML 文档 ， 并 修改 成 HTMLS5 标准 ， 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 
<title> 房 屋 装 饰 装修 效果 图 </title> 
</head> 

<body> 

</body> 

</html> 
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到 在 body 部 分 增加 如 下 HIML 代码 ， 保 存 页 面 。 


<p> <img src="images/xiyatu.jpg" width="300" height="200"/><br/> 
西雅图 原生 态 公寓 室内 设计 </p> 

<hr> <! 一 此 标签 将 显示 为 一 条 水 平 线 。--> 

<p> <img src="images/stadshem.jpg" width="300" height="200"/><br/> 
Stadshem 人 小 户型 公寓 设计 〈 带 阁楼 ) </p> 

<hr> 

<p> <img src="images/qingxinhuoli.jpg" width="300" height="200"/><br/> 
清新 活力 家 居 </p> 

<hr> 

<p> <img src="images/renwen.jpg" width="300" height="200"/><br/> 
人 文 简约 悠然 家 居 </p> 


<hr> 


图 2-16 房屋 装饰 效果 网 页 


| 引 | sm 标记 的 作用 是 定义 内 容 中 的 主题 变化 ， 并 显示 为 一 条 水 平 线 ， 在 HTMLS 中 它 
EREEES 没有 任何 属性 


另外 ， 快 速 插入 图 片 及 设置 相关 属性 可 以 借助 Dreamweaver CC 的 插入 功能 ， 或 者 按 下 组 
合 键 Ctrl+Alt+I。 
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2.6 ”专家 解 惑 


问题 1 : 换行 标记 和 段落 标记 的 区 别 ? 

答 : 换行 标记 是 单 标记 ， 不 能 写 结束 标记 。 段 落 标记 是 双 标 记 ， 可 以 省 略 结 束 标记 也 可 以 
不 省 略 。 默 认 情况 下 ， 段 落 之 间 的 距离 和 段落 内 部 的 行 间距 是 不 同 的 ， 段 落 间 距 比较 大 ， 行 间 
距 比较 小 。HTML 是 无 法 调整 段落 间距 和 行 间距 的 ， 如 果 需 要 调整 它们 ， 就 必须 使 用 CSS。 在 
Dreamweaver CC 的 设计 视图 下 ， 按 Enter 键 可 以 快速 换 段 ， 按 Shift+ Enter 组 合 键 可 以 快速 换 
行 。 

问题 2 : 无 序列 表 <ul> 标 记 的 作用 ? 

答 : 无 序列 表 标 记 主 要 用 于 条 理化 和 结构 化 文本 信息 。 在 实际 开发 中 ， 无 序列 表 在 制作 导 
航 菜单 时 使 用 广泛 。 导 航 菜单 的 结构 一 般 都 使 用 无 序列 表 实 现 。 

问题 3 : 在 浏览 器 中 ， 图 片 无 法 显示 。 

答 : 图 片 在 网 页 中 属于 嵌入 对 象 ， 并 不 是 图 片 保 存在 网 页 中 ， 网 页 只 是 保存 了 指向 图 片 的 
路 径 。 浏 览 器 在 解释 HTML 文件 时 ， 会 按 指定 的 路 径 去 寻找 图 片 ， 如 果 在 指定 的 位 置 不 存在 
图 片 ， 就 无 法 正常 显示 。 为 了 保证 图 片 的 正常 显示 ， 制 作 网 页 时 需要 注意 以 下 几 点 。 


(1) 图 片 格式 一 定 是 网 页 支持 的 。 

(2) 图 片 的 路 径 一 定 要 正确 ， 并 且 图 片 文件 扩展 名 不 能 省 略 。 

(3) HTML 文件 位 置 发 生 改变 时 ， 图 片 一 定 要 随 着 改变 ， 即 图 片 位 置 和 HTML 文件 位 置 
始终 保持 相对 一 致 。 
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HTML 文件 中 最 重要 的 应 用 之 一 就 是 超 链接 。 超 链接 是 一 个 网 站 的 灵魂 ，Web 上 的 网 页 是 
互相 链接 的 ， 单 击 被 称 为 超 链接 的 文本 或 图 形 就 可 以 链接 到 其 他 页 面 。 


3.1 URL 的 概念 


URL 为 “Uniform Resource Locator” 的 缩写 ， 通 常 翻译 为 “统一 资源 定位 器 ”， 也 就 是 人 
们 通常 说 的 “网 址 ”， 它 用 于 指定 Intemet 上 的 资源 位 置 。 


3.1.1 URL 的 格式 


网 络 中 的 计算 机 是 通过 IP 地 址 区 分 的 ， 如 果 需 要 访问 网 络 中 某 台 计算 机 中 的 资源 ， 首 先 
要 定位 到 这 台 计 算 机 。IP 地 址 由 32 位 二 进 制 代码 〈 即 32 个 0/1) 组 成 ， 数 字 之 间 没 有 意义 ， 
且 不 容易 记忆 。 为 了 方便 记忆 ， 现 在 计算 机 一 般 采 用 域名 的 方式 来 寻 址 ， 即 在 网 络 上 使 用 一 组 
有 意义 字符 组 成 的 地 址 代替 人 P 地 址 来 访问 网 络 资源 。 

URL 由 4 个 部 分 组 成 ， 即 “协议 ”“ 主 机 名 ”“ 文 件 夹 名 ”“ 文 件 名 ”， 如 图 3-1 所 示 。 


8 p:/ /www. webDesign, com/pages/computer. html 
T Ll 
协议 主机 名 文件 夹 名 文件 名 


图 3-1 URL 组 成 


互联 网 中 有 各 种 各 样 的 应 用 ， 如 Web 服务 、FTP 服务 等 。 每 种 服务 应 用 都 得 对 应 有 协议 ， 
通过 浏览 器 浏览 网 页 的 协议 都 是 HTTP 协议 〈 超 文本 传输 协议 ) ， 因 此 通常 网 页 的 地 址 都 以 
“http:/” 开 头 。 

“www.baidu.com” 为 主机 名 ， 表 示 文 件 存在 于 哪 台 服务 器 ， 主 机 名 可 以 通过 IP 地 址 或 
域名 来 表示 。 

确定 到 主机 后 ， 还 需要 说 明文 件 存在 于 这 人 台 服 务 器 的 哪个 文件 夹 中 ,这 里 文件 夹 可 以 分 为 
多 个 层级 。 

确定 文件 夹 后 , 就 要 定位 到 文件 , 即 要 显示 哪个 文件 , 网 页 文件 通常 是 以 “html” 或 “htm” 
为 扩展 名 。 
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3.1.2 URL 的 类 型 


在 第 2 章 讲解 网 页 中 使 用 的 图 像 时 ， 已 经 介绍 了 “路 径 ”的 概念 。 对 于 超 链接 来 说 ， 路 径 
的 概念 同样 存在 。 
超 链接 的 URL 可 以 分 为 绝对 URL 和 相对 URL 两 种 类 型 。 


(1) 绝对 URL 一 般 用 于 访问 非 同 一 台 服 务 器 上 的 资源 。 

(2) 相对 URL 是 指 访问 同一 台 服 务 器 上 相同 文件 夹 或 不 同文 件 夹 中 的 资源 。 如 果 访 问 相 
同文 件 夹 中 的 文件 ， 只 需要 写 文件 名 ; 如 果 访 问 不 同文 件 夹 中 资源 ，URL 以 服务 器 的 根 目录 为 
起 点 ， 指 明文 件 的 相对 关系 ， 由 文件 夹 名 和 文件 名 两 部 分 构成 。 


下 面 实例 使 用 绝对 URL 和 相对 URL 实现 超 链接 。 


【 例 3.1】 实例 文件 ，ch03\3.1.html) 

<!DOCTYPE html> 

<html> 

<head> 

<title> 绝 对 URL 和 相对 URL</title> 

</head> 

<body> 

<!-- 使 用 绝对 URL--> 

单 击 <a href="http://www.WebDesign.com/index.html"> 绝 对 URL</a> 链 接 到 
WebDesign 网 站 首页 <br/> 

<!-- 使 用 相对 URIL--> 

单 击 <a href="02.html"> 相 同文 件 夹 的 URL</a> 链 接 到 相同 文件 夹 中 的 第 2 个 页 面 <br/> 

单 击 <a href="../pages/03.html"> 不 同文 件 夹 的 URL</a> 链 接 到 不 同文 件 夹 中 的 第 3 个 页 面 

</body> 

</html> 


在 上 述 代码 中 ， 第 1 个 链接 使 用 的 是 绝对 URL; 第 2 个 链接 使 用 的 是 服务 器 相对 URL， 
也 就 是 链接 到 文档 所 在 服务 器 的 根 目录 下 的 02.html 文件 ; 第 3 个 链接 使 用 的 是 文档 相对 URL， 


即 原文 档 所 在 文件 夹 的 父 文件 夹 下 面 的 pages 文件 夹 中 的 03.html 文件 。 
在 正 11.0 中 预览 网 页 效果 如 图 3-2 所 示 。 


站 ”DA 本 书 源 代 码 \code 详 图 ”搜索 
车 绝对 URL 和 相对 URL Bn 
文件 (F) 编辑 (E) ”查看 (V) 收藏 夫 (A) 工具 (T) 帮助 (H) 


这 剖 百 度 一 下 , 你 襄 知 道 


次 让 约定 nin 首页 
单 击 相同 文件 夹 的 URL 链 接 到 相同 文件 夹 中 的 第 2 个 页 面 
i 不 同文 件 夹 的 URL 链 接 到 不 同文 件 夹 中 的 第 3 个 页 面 


图 3-2 绝对 URL 和 相对 URL 
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3.2 ”起 链接 标记 <a> 


超 链接 是 指 当 鼠 标 单 击 一 些 文本 、 图 片 或 其 他 网 页 元 素 时 ,浏览 器 会 根据 其 指示 载 入 一 个 
新 的 页 面 或 跳 转 到 页 面 的 其 他 位 置 。 超 级 链接 除了 可 链接 文本 外 ， 还 可 链接 各 种 多 媒体 ， 如 声 
音 、 图 像 、 动 画 等 ， 通 过 它们 可 享受 丰富 多 彩 的 多 媒体 世界 。 

建立 超 链接 所 使 用 的 HTML 标记 为 <a></a>。 超 链接 最 重要 的 两 个 要 素 是 超 链接 指向 的 目 
标 地 址 和 设置 为 超 链接 的 网 页 元 素 。 基 本 的 超 链接 结构 如 下 : 


<a href=URL> 网 页 元 素 </a> 


3.2.1 设置 文本 和 图 片 的 超 链接 

设置 超 链接 的 网 页 元 素 通常 使 用 文本 和 图 片 。 文 本 超 链接 和 图 片 超 链接 通过 <a></a> 标 记 
实现 ， 将 文本 或 图 片 放 在 <a> 开 始 标记 和 </a> 结 束 标记 之 间 即 可 建立 超 链接 。 

下 面 实例 将 实现 文本 和 图 片 的 超 链接 。 


【 例 3.2】 实例 文件 :ch03\3.2.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 文 本 和 图 片 超 链接 </title> 

</head> 

<body> 

<a href="a.html"><img src="images/0371.gif"></a> 
<a href="b.html"> 公 司 简介 </a> 

</body> 

</html> 


在 下 11.0 中 预览 网 页 效果 如 图 3-3 所 示 。 用 鼠标 单 击 图 片 或 文本 即 可 实现 链接 跳 转 的 效果 。 


- oO x 
© 羡 ”D:\ 本 书 源 代码 \code 衣 图 “~ ( | D:\ 本 书 源 代码 \codej 
半 文本 和 图 片 超 链 接 x | 上 
文件 (F) 编辑 (E) 查看 (V) 收藏 夫 (A) 工具 (T) 帮助 (H) 
博 当 百 度 一 下 ,你 宫 知 道 


file:///D:/ 本 书 源 代码 /code/ 源 代码 /ch03/a.html 


图 3-3 文本 和 图 片 链接 效果 
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默认 情况 下 ， 为 文本 添加 超 链 接 ， 文 本 会 自动 增加 下 画 线 ， 并 且 文 本 颜色 变 为 蓝 色 ， 单 击 
过 的 超 链接 ， 文 本 会 变 成 暗 红色 。 图 片 增加 超 链接 以 后 ， 浏 览 器 会 自动 给 图 片 加 一 个 粗 边 框 。 
图 片 和 文本 超 链接 的 下 画 线 需要 借助 CSS 样式 完成 ， 这 里 不 作 介绍 ， 详 见 CSS 部 分 。 


3.2.2 ” 超 链 接 指向 的 目标 类 型 

通过 上 面 的 讲解 ， 读 者 会 发 现 超 链接 的 目标 对 象 都 是 html 类 型 的 文件 。 超 链接 不 但 可 以 
链接 到 各 种 类 型 (如 图 片 文件 、 声 音 文件 、 视 频 文件 、word 等 ) 的 文件 ， 还 可 以 链接 到 其 他 网 
站 、ftp 服务 器 、 电 子 邮 件 等 。 


1. 链接 到 各 种 类 型 的 文件 

超 链 接 <a> 标 记 的 href 属性 指向 链接 的 目标 ， 目 标 可 以 是 各 种 类 型 的 文件 。 如 果 是 浏览 器 
能 够 识别 的 类 型 ， 就 会 直接 在 浏览 器 中 显示 ; 如 果 是 浏览 器 不 能 识别 的 类 型 ， 在 正 浏览 器 中 
会 弹出 文件 下 载 对 话 框 ， 如 图 3-4 所 示 。 


Internet Explorer X 
要 对 2.doc 执行 什么 操作 ? 


大 小 : 10.5 KB 
来 源 : DA\ 本 书 源 代 码 code\ 源 代码 \ch03 


人 打开 (0) 
不 自动 保存 文件 。 


人 保存 (5) 
全 另存 为 (A) 


取消 
图 3-4 正中 的 文件 下 载 对 话 框 


【 例 3.3】 《实例 文件 :ch03\3.3.html) 
<!DOCTYPE html> 

<html> 

<head> 

<title> 链 接 各 种 类 型 文件 </title> 

</head> 

<body> 

<p><a href="a.html"> 链 接 html 文 件 </a></p> 
<p><a href="coffe.jpg"> 链 接 图 片 <//a></p> 
<p><a href="2.doc"> 链 接 word 文 档 </a></p> 
</body> 

</html> 


在 正 11.0 中 预览 网 页 效果 如 图 3-5 所 示 。 实 现 链接 到 HTML 文件 、 图 片 和 Word 文档 。 
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- 0O x 
名 D:\ 本 书 源 代码 \code 庄 图。 ” 忆 Di:\ 本 书 源 代码 \code 

生 链接 各 种 类 型 文件 x 辐 

文件 (F) 编辑 (日 、 查 看 V) 收藏 夫 (A) 工具 (D) 帮助 (H) 

请 当 百 度 一 下 ,你 就 知 道 


链接 html 文 件 
链接 图 片 
链接 word 文 档 


图 3-5 各 种 类 型 的 链接 


2. 链接 到 其 他 网 站 或 FTP 服务 器 
在 网 页 中 ， 友 情 链 接 也 是 推广 网 站 的 一 种 方式 。 下 列 代码 实现 了 链接 到 其 他 网 站 或 FTP 
服务 器 的 功能 。 


<a href="http://www.baidu.com"> 链 接 百度 </a> 
<a href="ftp://172.16.1.254"> 链 接 到 ftp 服 务 器 </a> 


这 里 FTP 服务 器 用 的 是 他 地址。 为 了 保证 代码 的 正确 运行 ， 请 读者 填写 有 效 的 FTP 服务 器 
| 地 址 . 


3. 设置 电子 邮件 链接 

在 某 些 网 页 中 , 当 访 问 者 单 击 某 个 链接 以 后 , 会 自动 打开 电子 邮件 客户 端 软件 (如 Outlook 
或 Foxmail 等 ) 向 某 个 特定 的 E-mail 地 址 发 送 邮 件 ， 这 个 链接 就 是 电子 邮件 链接 。 电 子 邮 件 链 
接 的 格式 如 下 : 


<a href="mailto: 电 子 邮件 地 址 ”> 网 页 元 素 </a> 


【 例 3.4】〔 实 例文 件 ，ch03\3.4.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 电 子 邮 件 链接 </title> 

</head> 

<body> 

<img src="images/logo.gif" width="119" height="49"> [免费 注册 ] [登录 ] 
<a href="mailto:kfdzsj@126.com"> 站 长 信箱 </a> 

</body> 

</html> 


在 正 11.0 中 预览 网 页 效果 如 图 3-6 所 示 ， 实 现 了 电子 邮件 链接 。 
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当 读 者 单 击 【站 长 信箱 】 链 接 时 ， 会 自动 弹出 电子 邮件 客户 端 窗口 以 编写 电子 邮件 ， 如 图 
3-7 所 示 。 


[全 le 和 -HTMD ES 本 
Es | A wm We 5 < 上 
[到 ” As @ dNx4 yA. 
和 和 站 a 这 | 姓名 县 mg iil 
> | ” Be. 人 
著 同 板 添加 大 记 :| 量 示 比 例 
xs 人 - ] 
= 一“ 可， 洲 
抄 尖 (O-- ] 
乱 _D:\ 本 书 源 代码 \code 诺 图 ” 忆 | D:\ 本 书 源 代码 es | ] 
您 电子 邮件 链接 x 区 - 司 
文件 (F) 编辑 (查看 (V) 收藏 夫 (A) 工具 (T) 帮助 (H) 4 
二 各 百度 一 下 ， 从 SH40 首 
et [免费 注册 ][ 登 录 ] 站 长 信箱 加 
图 3-6 链接 到 电子 邮件 图 3-7 电子 邮件 客户 端 窗口 


3.2.3 ”设置 以 新 窗口 显示 超 链 接 页 面 


默认 情况 下 ， 当 单 击 超 链接 时 ， 目 标 页 面 会 在 当前 窗口 中 显示 并 蔡 换 掉 当 前 页 面 的 内 容 。 
如 果 要 实现 在 单 击 某 个 超 链接 后 在 新 的 浏览 器 窗口 中 显示 目标 页 面 ， 就 需要 使 用 <a> 标 记 的 
target 属性 。target 属性 取 值 有 4 个 : _blank、_self、_top、_parent。 由 于 HTMLS5 不 再 支持 框 ， 
所 以 _top、_parent 这 两 个 取 值 不 常用 。 本 小 节 仅 为 读者 讲解 blank、_self 值 。 其 中 ，_blank 表 
示 在 新 窗口 中 显示 超 链 接 页 面 ， self 表示 在 当前 窗口 中 显示 超 链 接 页 面 。 当 省 略 target 属性 时 ， 
默认 取 值 为 self。 


【 例 3.5】 实例 文件 ，ch033.5.html) 

<!DOCTYPE html> 

<html> 

<head> 

<title> 以 新 窗口 方式 打开 </title> 

</head> 

<body> 

<a href="a.html target=" blank"> 新 窗口 </a> 
</body> 

</html> 


在 下 11.0 中 预览 网 页 效果 如 图 3-8 所 示 。 
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口 x 


Ge 间 D:\ 本 书 源 代码 Vode 图 - 上 
< 


辱 以 新 窗口 方式 打开 


文件 (编辑 (5) 查看 (V) 收藏 夫 (A) 工具 (T) 》 
己基 百 度 一 下 ， 你 8 知道 


新 窗口 


图 3-8 新 窗口 页 面 


3.3 ”创建 热点 区 域 
在 浏览 网 页 时 读者 会 发 现 ， 当 单 击 一 张 图 片 的 不 同 


区 域 时 会 显示 不 同 的 链接 内 容 ， 这 就 是 
图 片 的 热点 区 域 。 所 谓 图 片 的 热点 区 域 就 是 将 一 个 图 片 划 分 成 若干 个 链接 区 域 。 访 问 者 单 击 不 
同 的 区 域 会 链接 到 不 同 的 目标 页 面 。 


在 HTML 中 ， 可 以 为 图 片 创建 3 种 类 型 的 热点 区 域 : 矩形 、 圆 形 和 多 边 形 。 创 建 热点 区 
域 使 用 标记 <map> 和 <area>， 语 法 格式 如 下 : 


<img src=" 图 片 地 址 ”usemap="# 名 称 "> 
<map id="# 名 称 "> 

<area shape="rect" coords="10,10,100,100" href="#"> 

<area shape="circle" coords="120,120,50" href="#"> 

<area shape="poly" coords="78,13,81,14,53,32,86,38" href="#"> 
</map> 


在 上 面 


的 语法 格式 中 ， 需 要 注意 以 下 几 点 : 


(1) 要 想 建立 图 片 热点 区 域 ， 必 须 先 插入 图 片 。 注 意 ， 图 片 必须 增加 usemap 属性 ， 说 明 
该 图 像 是 热 区 映射 图 像 , 属性 值 必 须 以 “#” 开 头 , 如 tic。 那么 上 面 一 行 代 码 可 以 修改 为 : <img 
src=" 图 片 地 址 " usemap="#pic">。 


(2) <map> 标 记 只 有 一 个 属性 id， 其 作用 是 为 区 域 命名 ， 属 性 值 必须 与 <img> 标 记 的 usemap 
属性 值 相同 ， 修 改 上 述 代 码 为 <map id="#pic"> 


(3) <area> 标 记 主 要 是 定义 热点 区 域 的 形状 及 超 链 接 ， 它 有 3 个 相应 的 属性 。 
@ ”shape 属性 ， 控 件 划分 区 域 的 形状 ， 其 取 值 有 3 个 ， 分 别 是 rect ( 和 天 形 ) 、circle 
( 圆 形 ) 和 poly (多 边 形 ) 。 


多 ”如 果 shape 属性 取 值 为 rect， 那 么 coords 的 设置 值 分 别 为 矩形 的 左上 角 X、y 坐 
标点 和 右 下 角 x、y 坐标 点 ， 单 位 为 像素 。 


多 ”如果 shape 属性 取 值 为 circle， 那 么 coords 的 设置 值 分 别 为 圆 形 圆心 x、y 坐标 
点 和 半径 值 ， 单 位 为 像素 。 
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多 ”如果 shape 属性 取 值 为 poly， 那 么 coords 的 设置 值 分 别 为 多 边 形 在 各 个 点 XxX、y 
坐标 ， 单 位 为 像素 。 
@ 。 coords 属性， 控制 区 域 的 划分 坐标 。 
@ href 属性 是 为 区 域 设置 超 链接 的 目标 ， 设 置 值 为 “# 时 ， 表 示 为 空 链接 。 


3.4 浮动 框架 iframe 


HTML5 中 已 经 不 支持 frameset 框架 ， 但 是 它 仍然 支持 frame 浮动 框架 的 使 用 。 浮 动 框架 
可 以 自由 控制 窗口 大 小 ， 可 以 配合 表格 随意 地 在 网 页 的 任何 位 置 插入 窗口 。 实 际 上 就 是 在 窗口 
中 再 创建 一 个 窗口 。 

使 用 frame 创建 浮动 框架 的 格式 如 下 : 


<iframe src=" 链 接 对 象 " > 


其 中 ，src 表示 浮动 框架 中 显示 对 象 的 路 径 ， 可 以 是 绝对 路 径 ， 也 可 以 是 相对 路 径 。 例 如 ， 
下 面 的 代码 是 在 浮动 框架 中 显示 到 百度 网 站 。 


【 例 3.6】 实 例文 件 ，ch03\3.6.html) 

<!DOCTYPE html> 

<html> 

<head> 

<title> 浮 动 框架 中 显示 百度 网 站 </title> 

</head> 

<body> 

<iframe src="http://www.baidu.com"></iframe> 
</body> 

</html> 


在 下 11.0 中 预览 网 页 效果 如 图 3-9 所 示 。 


号 口 x 
站 ”DA\ 本 书 源 代码 \code 谤 图。”” DA\ 本 书 源 代码 

并 浮动 框架 中 显示 百度 网 站 。 x | 

文件 (F) 编辑 (E) 查看 (V) 收藏 夫 (A) 工具 (D) 帮助 (H) 

请 洛 百 度 一 下 ， 你 就 知道 


Bai 百度 


> 


图 3-9 浮动 框架 效果 
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从 预览 结果 可 见 ， 浮 动 框架 在 页 面 中 又 创建 了 一 个 窗口 。 默 认 情 况 下 ， 浮 动 框架 的 宽度 和 
高 度 为 220X 120 像素 ， 如 果 需 要 调整 浮动 框架 尺寸 ， 请 使 用 CSS 样式 。 修 改 上 述 浮动 框架 尺 


寸 ， 需 在 <head></head> 标 记 中 间 增 加 如 下 CSS 代码 。 


<style> 

iframe{ 
width:1200px; /* 设 置 浮动 框架 的 宽度 */ 
height:800px; /* 设 置 浮动 框架 的 高 度 */ 
border:none; /* 设 置 无 边框 效果 */ 

} 

</style> 


在 下 11.0 中 预览 网 页 效果 如 图 3-10 所 示 。 
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图 3-10 修改 宽度 和 高 度 的 浮动 框架 


-区 _ 在 HTML5 中 ，iframe 仅 支持 src 属性 ， 再 无 其 他 属性 。 


3.5 ”综合 实例 一 一 用 Dreamweaver 精确 定位 热点 区 域 


上 面 讲述 了 HTML 创建 热点 区 域 的 方法 ， 其 中 最 让 读者 头痛 的 地 方 就 是 坐标 点 的 定位 。 


对 于 简单 的 形状 还 可 以 ， 如 果 边 数 较 多 且 形 状 复杂 ， 那 么 确定 坐标 点 的 工程 量 就 很 大 ， 因 


用 Dreamweaver CC 可 以 很 方便 地 实现 这 个 功能 。 
Dreamweaver CC 创建 图 片 热点 区 域 的 具体 操作 步骤 如 下 : 


此 不 


建议 使 用 HIML 代码 去 完成 。 这 里 将 为 读者 介绍 一 个 快速 且 能 精确 定位 热点 区 域 的 方法 ， 使 
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L 国 创建 一 个 HTML 文档 ， 插 入 一 个 图 片 文 件 ， 如 图 3-11 所 示 。 


图 3-11 插入 图 片 


@g 到 选择 图 片 ， 在 Dreamweaver CC 中 打开 【属性 】 面 板 ， 面 板 左下 角 有 3 个 蓝 色 图 标 按 
钮 ， 依 次 代表 抵 形 、 圆 形 和 多 边 形 热点 区 域 。 单 击 左 边 的 【 撼 形 热 点 】 工 具 图 标 ， 如 图 3-12 


所 示 。 
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图 3-12 Dreamweaver CC 中 的 【属性 】 面 板 
胃 将 鼠标 指针 移动 到 图 片上 ， 以 【创意 信息 平台 〗】 栏 中 的 短 形 大 小 为 准 ， 按 住 鼠 标 左 键 
从 左上 方向 右 下 方 抱 入 ， 得 到 矩形 区 域 ， 如 图 3-13 所 示 。 
加 网 绘制 出 来 的 热 区 呈现 出 半 透 明 状 态 ， 效 果 如 图 3-14 所 示 。 


图 3-13 ”绘制 矩形 热点 区 域 图 3-14 完成 矩形 热点 区 域 的 绘制 


@ 量 如 有 果 绘制 出 来 的 矩形 热 区 有 误差 ， 可 以 通过 【属性 】 面 板 中 的 【指针 热点 】 工 具 进行 
编辑 ， 如 图 3-15 所 示 。 
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图 3-15 “指针 热点 ”工具 


t@g 完成 上 述 操作 之 后 ， 保 持 和 矩形 热 区 被 选中 状态 ， 然 后 在 【属性 】 面 板 中 的 【链接 】 文 
本 框 中 输入 该 热点 区 域 链接 对 应 的 跳 转 目标 页 面 。 

国 在 【目标 】 下 拉 列 表 框 中 有 4 个 选项 ， 它 们 决定 着 链接 页 面 的 弹出 方式 ， 这 里 如 果 选 
择 了 【_blank】， 那 么 矩形 热 区 的 链接 页 面 将 在 新 的 窗口 中 弹出 。 如 果 【 目 标 】 选 项 保持 空白 ， 
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就 表示 仍 在 原来 的 浏览 器 窗口 中 显示 链接 的 目标 页 面 。 这 样 ， 矩 形 热点 区 域 就 设置 好 了 。 
La 国 接 下 来 继续 为 其 他 菜单 项 创建 答 形 热点 区 域 。 操 作 方法 请 参阅 上 面 步 又， 完成 后 的 效 
果 如 图 3-16 所 示 。 


图 3-16 为 其 他 菜单 项 创建 矩形 热点 区 域 


t@gj 完成 后 保存 并 预览 页 面 。 可 以 发 现 ,凡是 绘制 了 热点 的 区 域 ， 鼠 标 指针 移 上 去 时 就 会 
变 成 手 形 ， 单 击 就 会 跳 转 到 相应 的 页 面 。 

量 加 到 此 为 止 ， 使 用 热点 区 域 制作 网 站 的 导航 就 完成 了 。 此 时 页 面相 应 的 HIML 源 代码 
如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<title> 创 建 热 点 区 域 </title> 

</head> 

<body> 

<img src="images/04.jpg" width="1001" height="87" border="0" 

usemap="#Map"> 

<map name="Map"> 
<area shape="rect" coords="298,5,414,85" href="#"> 
<area shape="rect" coords="412,4,524,85" href="#"> 
<area shape="rect" coords="525,4,636,88" href="#"> 
<area shape="rect" coords="639,6,749,86" href="#"> 
<area shape="rect" coords="749,5,864,88" href="#"> 
<area shape="rect" coords="86]1,6,976,86" href="#"> 

</map> 

</body> 

</html> 


可 以 看 到 ，Dreamweaver CC 自动 生成 的 HIML 代码 结构 和 前 面 介绍 的 是 一 样 的 ， 所 有 的 


坐标 都 自动 计算 出 来 了 ， 这 正 是 网 页 制作 工具 的 快捷 之 处 。 使 用 这 些 工 具 本 质 上 与 手工 编写 
HIML 代码 没有 区 别 ， 只 是 使 用 这 些 工 具 可 以 提高 工作 效率 。 


未 书 所 讲述 手工 编写 HTML 代码 的 方法 , 在 Dreamweaver CC 工具 中 几乎 都 有 对 应 
ES 的 操作 ， 请 读者 自行 研究 ， 以 提高 编写 HTML 代码 效率 。 但 是 请 读 考 注意， 使 用 
网 页 制作 工具 前 ， 一 定 要 明白 这 些 HTML 标记 的 作用 。 因 为 一 个 专业 的 网 页 设计 
师 必 须 具 备 HTML 方面 的 知识 ， 不 然 再 强大 的 工具 也 只 能 是 无 根 之 树 ， 无 源 之 泉 。 
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3.6 ”专家 解 惑 


1. 在 创建 超 链 接 时 ， 使 用 绝对 URL 还 是 相对 URL ? 

答 : 在 创建 超 链接 时 ， 如 果 要 链接 的 是 另外 一 个 网 站 中 的 资源 ， 就 需要 使 用 完整 的 绝对 
URL; 如 果 在 网 页 中 创建 内 部 链接 ， 一 般 使 用 相对 当前 文档 或 站 点 根 文件 夹 的 相对 URL。 

2. 链接 增多 后 ， 网 站 如 何 设置 目录 结构 以 方便 维护 ? 

答 : 当 一 个 网 站 的 网 页 数量 增加 到 一 定 程 度 以 后 ， 网 站 的 管理 与 维护 将 变 得 非常 烦琐 ， 因 
此 掌握 一 些 网 站 管理 与 维护 的 技术 是 非常 实用 的 ， 可 以 节省 很 多 时 间 。 建 立 适合 的 网 站 文件 存 
储 结构 ， 可 以 方便 网 站 的 管理 与 维护 。 通 常 使 用 的 3 种 网 站 文件 组 织 结构 方案 及 文件 管理 遵循 
的 原则 如 下 : 


(1) 按照 文件 的 类 型 进行 分 类 管理 。 将 不 同类 型 的 文件 放 在 不 同 的 文件 夹 中 ， 这 种 存储 
方法 适合 于 中 小 型 的 网 站 ， 通 过 文件 的 类 型 对 文件 进行 管理 。 

(2) 按照 主题 对 文件 进行 分 类 。 网 站 的 页 面 按照 不 同 的 主题 进行 分 类 存储 。 同 一 主题 的 
所 有 文件 存放 在 一 个 文件 夹 中 ， 再 进一步 细 分 文件 的 类 型 。 这 种 方案 适用 于 页 面 与 文件 数量 众 
多 、 信 息 量 大 的 静态 网 站 。 

(3) 对 文件 类 型 进行 进一步 细 分 存储 管理 。 这 种 方案 是 第 一 种 存储 方案 的 深化 ， 将 页 面 
进一步 细 分 后 进行 分 类 存储 管理 ， 适 用 于 文件 类 型 复杂 、 包 含 各 种 文件 的 多 媒体 动态 网 站 。 


第 4 章 ”用 HTML5 创 建 表格 


在 HTML 中 ， 表 格 不 但 可 以 清晰 地 显示 数据 ， 而 且 还 可 以 用 于 页 面 布局 。 目 前 表格 布局 
已 经 被 抛弃 ， 本 章 只 为 读者 介绍 表格 如 何 显示 数据 。 


4.1 表格 基本 结构 及 操作 


HTML 中 的 表格 类 似 于 Word 软件 中 的 表格 ， 尤 其 在 使 用 网 页 制作 工具 时 ， 基 本 操作 也 很 
相似 。HTML 制作 表格 的 原理 是 使 用 相关 标记 定义 完成 ， 如 表格 对 象 <table>、 行 对 象 <tr>、 单 
元 格 对 象 <td>， 其 中 单元 格 的 合并 在 表格 操作 中 应 用 广泛 。 


4.1.1 表格 基本 结构 

使 用 表格 显示 数据 ， 可 以 更 直观 和 清晰 。 在 HTML 文档 中 表格 主要 用 于 显示 数据 ， 虽 然 
可 以 使 用 表格 布局 ， 但 是 不 建议 使 用 ， 它 有 很 多 痊 端 。 表格 一 般 由 行 、 列 和 单元 格 组 成 ， 如 图 
4-1 所 示 。 


图 4-1 表格 的 组 成 


<table> 标 记 用 于 标识 一 个 表格 对 象 的 开始 ，</table> 标 记 用 于 标识 一 个 表格 对 象 的 结束 。 
一 个 表格 中 ， 只 允许 出 现 一 对 <table> 标 记 。 在 HIML5 中 不 再 支持 它 的 任何 属性 。 
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<tr> 标 记 用 于 标识 表格 一 行 的 开始 ，</tr> 标 记 用 于 标识 表格 一 行 的 结束 。 表 格 内 有 多 少 对 
<tr></tr> 标 记 ， 就 表示 表格 中 有 多 少 行 。 在 HTMLS5 中 不 再 支持 它 的 任何 属性 。 

<td> 标 记 用 于 标识 表格 某 行 中 的 一 个 单元 格 开始 , </td> 标 记 用 于 标识 表格 某 行 中 的 一 个 单 
元 格 结束 。<td></td> 标 记 书 写 在 <tr></tr> 标 记 内 ， 一 对 <tr></tr> 标 记 内 有 多 少 对 <td></td> 标 记 ， 
就 表示 该 行 有 多 少 个 单元 格 。 在 HIML5 中 仅 有 colspan 和 rowspan 两 个 属性 , 详 见 4.1.2 小 节 。 

最 基本 的 表格 必须 包含 一 对 <table></table> 标 记 、 一 对 或 几 对 <tr></tr> 标 记 及 一 对 或 几 对 
<td></td> 标 记 。 一 对 <table></table> 标 记 定 义 一 个 表格 ， 一 对 <tr></tr> 标 记 定义 一 行 ， 一 对 
<td></td> 标 记 定 义 一 个 单元 格 。 

例如 定义 一 个 4 行 3 列 的 表格 。 


【 例 4.1】 (实例 文件 :ch04\4.1.html) 


<!DOCTYPE html> 
<html> 
<head> 
<title> 表 格 基本 结构 </title> 
</head> 
<body> 
<table> 
EE 
<td>Al</td> 
<td>B1</td> 
<td>C1</td> 
<> 
<tr> 
<td>A2</td> 
<td>B2</td> 
<td>C2</td> 
<tr> 
<tr> 
<td>A3</td> 
<td>B3</td> 
<td>C3</td> 
</tr> 
<tr> 
<td>A4</td> 
<td>B4</td> 
<td>C4</td> 
安信 下 大 六 
</table> 
</body> 
</html> 


在 正 11.0 中 预览 网 页 效果 如 图 4-2 所 示 。 
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从 预览 图 中 读者 会 发 现 ， 表 格 没有 边框 ， 行 高 及 列 宽 也 无 法 控制 。 上 面 提 到 HIMLS 中 除 
了 <td> 标 记 提供 两 个 单元 格 合 并 属性 之 外 ，<table> 和 <tr> 标 记 已 没有 任何 属性 。 那 么 如 何 修饰 
表格 呢 ? 表格 的 所 有 外 观 设置 都 需要 通过 CSS 样式 完成 ， 详 见 CSS 章节 部 分 。 
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图 4-2 表格 基本 结构 


4.1.2 合并 单元 格 


在 实际 应 用 中 ， 并 非 所 有 表格 都 是 规范 的 几 行 几 列 ， 有 时 需要 将 某 些 单元 格 进行 合并 ， 以 
符合 某 种 内 容 上 的 需要 。 在 HIML 中 合并 的 方向 有 两 种 : 一 种 是 上 下 合并 ; 另 一 种 是 左右 合 
并 ， 这 两 种 合并 方式 只 需要 使 用 <td> 标 记 的 两 个 属性 即 可 。 

1. 用 colspan 属性 合并 左右 单元 格 


左右 单元 格 的 合并 需要 使 用 <td> 标 记 的 colspan 属性 完成 ， 格 式 如 下 : 


<td colspan=" 数 值 "> 单 元 格 内 容 </td> 


其 中 ，colspan 属性 的 取 值 为 数值 型 整数 数据 ， 代 表 几 个 单元 格 进行 左右 合并 。 
例如 , 在 上 面 表格 的 基础 上 将 Al 和 Bl 单元 格 合并 成 一 个 单元 格 , 为 第 一 行 的 第 一 个 <td> 
标记 增加 colspan="2" 属 性 ， 并 且 将 B1 单元 格 的 <td> 标 记 删 除 。 


【 例 4.2】 (实例 文件 ，ch04\4.2.html) 
<!DOCTYPE html> 

<html> 

<head> 
<title> 单 元 格 左右 合并 </title> 
</head> 

<body> 

<table border="1"> <!-- 设 置 表格 边框 的 粗细 --> 
<Er> 

<td colspan="2">Al B1</td> 
<td>C1</td> 
</tr> 


<!-- 合 并 第 一 个 行 的 列 1 和 列 2 单元 格 --> 
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<tEr> 
<td>A2</td> 
<td>B2</td> 
<td>C2</td> 
</tr> 
<tr> 
<td>A3</td> 
<td>B3</td> 
<td>C3</td> 
</tr> 
福全 正之 
<td>A4</td> 
<td>B4</td> 
<td>C4</td> 
</tr> 
</table> 
</body> 
</html> 


在 正 11.0 中 预览 网 页 效果 如 图 4-3 所 示 。 


- 0O x 
机 “DA 二 书 源 人 到 vodev 国 -局 

| 站 提 元 左右 后 并 “加 

文件 (F) 编 汤 (E) 查看 (V) 收藏 去 [A] 工具 (D) 帮 ” 

请 各 百度 一 下 ,你 40 首 


图 4-3 单元 格 左右 合并 
从 预览 图 中 可 以 看 到 ，Al 和 Bl 单元 格 合并 成 一 个 单元 格 ，C1 还 在 原来 的 位 置 上 。 


合并 单元 格 以 后 ， 相 应 的 单元 格 标记 就 应 该 减少 。 例 如 ，Al 和 B1 单元 格 合并 后 ， 
外 E33 污 司 B1 单元 格 的 <td></td> 标 记 应 该 删除 ， 否 则 单元 格 就 会 多 出 一 个 ， 并 且 后 面 单元 格 
依次 向 右 位 移 。 


2. 用 rowspan 属性 合并 上 下 单元 格 
上 下 单元 格 的 合并 需要 为 <td> 标 记 增加 rowspan 属性 ， 格 式 如 下 : 
<td rowspan=" 数 值 "> 单元 格 内 容 </td> 


其 中 ，rowspan 属性 的 取 值 为 数值 型 整数 数据 ， 代 表 几 个 单元 格 进行 上 下 合并 。 
例如 , 在 上 面 表格 的 基础 上 将 Al 和 A2 单元 格 合 并 成 一 个 单元 格 , 为 第 一 行 的 第 一 个 <td> 
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标记 增加 rowspan="2" 属 性 ， 并 且 将 A2 单元 格 的 <td> 标 记 删 除 。 


【 例 4.3】〔 实 例文 件 ，ch04\4.3.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title> 单 元 格 左右 合并 </title> 
</head> 
<body> 
<table border="1"> <!-- 设 置 表格 边框 的 粗细 --> 
<tr> 
<td rowspan="2">R1R2</td> <!-- 合 并 第 1 个 行 和 第 2 行 的 列 1 和 列 2 单 元 格 --> 
<td>B1</td> 
<td>C1</td> 
</tr> 
<tr> 
<td>B2</td> 
<td>C2</td> 
</tr> 
<tr> 
<td>A3</td> 
<td>B3</td> 
<td>C3</td> 
</tr> 
<tr> 
<td>A4</td> 
<td>B4</td> 
<td>C4</td> 
</tr> 
</table> 
</body> 
</html> 


在 正 11.0 中 预览 网 页 效果 如 图 4-4 所 示 。 


后 单元 相左 右 合并 x | 
文件 (F) 闫 强 (E) 查看 (V) 收藏 夫 (A) 工具 (T) 大 ” 


请 当 百 度 一 下 ,你 训 知 道 


图 4-4 单元 格 上 下 合并 


从 预览 图 中 可 以 看 到 ，Al 和 A2 单元 格 合并 成 一 个 单元 格 。 
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通过 上 面 对 左右 单元 格 合并 和 上 下 单元 格 合并 的 操作 , 读者 会 发 现 合 并 单元 格 的 实质 就 是 
“丢掉 ” 某 些 单元 格 。 对 于 左右 合并 ， 就 是 以 左 侧 为 准 ， 将 右 侧 要 合并 的 单元 格 “ 丢 掉 ”; 对 
于 上 下 合并 ， 就 是 以 上 方 为 准 ， 将 下 方 要 合并 的 单元 格 “ 丢 掉 ”。 如 果 一 个 单元 格 既 要 向 右 合 
并 又 要 向 下 合并 ， 那 么 该 如 何 实现 呢 ? 


【 例 4.4】 实例 文件 ，ch04\4.4.html) 

<!DOCTYPE html> 

<html> 

<head> 

<title> 单 元 格 左 右 合 并 </title> 

</head> 

<body> 

<table border="1"> <!-- 设 置 表格 边框 的 粗细 --> 


<tr> 
<td colspan="2" rowspan="2">RA1B1<br>R2B2</td> <!-- 既 要 向 右 合并 ， 又 要 向 下 
合并 二 > 
<td>C1</td> 
</tr> 
<tEr> 
<td>C2</td> 
<HEr> 
“EF> 
<td>A3</td> 
<td>B3</td> 
<td>C3</td> 
</tr> 
<tr> 
<td>A4</td> 
<td>B4</td> 
<td>C4</td> 
/FE> 
</table> 
</body> 
</html> 


在 正 11.0 中 预览 网 页 效果 如 图 4-5 所 示 。 


= 口 x 
@ 向 D:\ 本 书 源 代码 YcodeW 图 ” 吕 
局 单元 格 左 右 合并 J 
文件 (F) 编辑 (E) 查看 V) 收藏 夫 (A) 工具 (T) ” 
音 汪 百 度 一 下 ， 你 M0 道 


IAlB1 |IC1 
IA2B2 ||C2 


AalBalfca 
[Ad4B4ic4| 


图 4-5 ”两 个 方向 合并 单元 格 
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从 上 面 的 代码 中 可 以 看 到 ，Al 单元 格 向 右 合 并 Bl 单元 格 ， 向 下 合并 A2 单元 格 ， 并 且 
A2 单元 格 向 右 合并 B2 单元 格 。 
3. 使 用 Dreamweaver CC 合并 单元 格 
使 用 HTML 创建 表格 非常 麻烦 ，Dreamweaver CC 工具 提供 了 表格 的 快捷 操作 ， 类 似 于 在 
Word 工具 中 编辑 表格 的 操作 。 在 Dreamweaver CC 中 创建 表格 ， 只 需要 执行 【插入 】 菜 单 中 的 
【表格 】 命 令 ， 在 弹出 的 对 话 框 中 指定 表格 的 行 数 、 列 数 、 宽 度 和 边框 ， 即 可 在 光标 处 创建 一 
个 空白 表格 。 选 择 表格 之 后 ，【 属 性 】 面 板 提供 了 表格 的 常用 操作 ， 如 图 4-6 所 示 。 


四 | 表格 行 @) 宽 中 像素 ”| 车 充 四) 对 齐 册 | 默认 可 类 O|[ 无 加 
一 v| 列 O 间距 G@) 边框 @) | 

局 种 吕 图 原 培 入 gb 

也 


图 4-6 表格 【属性 】 面 板 


表格 【属性 〗】 面 板 中 的 操作 ， 请 结合 前 面 讲述 的 HIML 语言 。 对 于 按钮 命令 ， 请 
本 本 读者 将 和 据 标 是 停 于 按钮 之 上 ， 数 秒 之 后 会 出 现 命令 提示 。 


关于 表格 的 操作 不 再 歼 述 ， 请 读者 自行 操作 ， 这 里 重点 讲解 如 何 使 用 Dreamweaver CC 合 
并 单元 格 。 在 Dreamweaver CC 可 视 化 操作 中 ， 提 供 了 合并 与 拆 分 单元 格 两 种 操作 。 拆 分 单元 
格 的 操作 ， 其 实 还 是 逆行 的 合并 操作 。 进 行 单元 格 合并 和 拆 分 时 ， 请 将 光标 置 于 单元 格 内 ， 如 
果 选 择 了 一 个 单元 格 ， 则 拆 分 命令 有 效 〈 如 图 4-7 所 示 ) ; 如 果 选 择 了 两 个 或 两 个 以 上 单元 格 ， 
则 合并 命令 有 效 。 


| 《> rmL| 格式 到 ) | 无 ~ 类 | 无 v BI 捕 二 二 可 标 题 [) 

此 css DD) 无 链接 册 ) YD 有 标 @ 

中 单元 格 。 水 平 @)| 默认 Y| 宽 四 | | 不 魏 行 @) 口 青 最 颜色 GC) [| | 
这。 委 直 加 ) 默认 ~ 高)| | 标题 

pp 拆 和 单元 格 


图 4-7 拆 分 单元 格 有 效 


4.2 ”完整 的 表格 标记 


前 面 讲述 了 表格 中 常用 的 3 个 标记 : <table>、<tr> 和 <td>， 使 用 它们 可 以 构建 出 最 简单 的 
表格 。 为 了 让 表格 结构 更 清楚 , 以 及 配合 后 面 学 习 的 CSS 样式 , 更 方便 地 制作 各 种 样式 的 表格 ， 
表格 中 还 会 出 现 表 头 、 主 体 、 脚 注 等 。 

按照 表格 结构 ， 可 以 把 表格 的 行 分 组 ， 称 为 “ 行 组 ”， 不 同 的 行 组 具有 不 同 的 意义 。 行 组 
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分 为 三 类 一 一 “ 表 头 ”“ 主 体 ” 和 “脚注 ”。 三 者 相应 的 HTML 标记 依次 为 <thead>、<tbody> 
和 <tfoot>。 

此 外 ， 在 表格 中 还 有 两 个 标记 。 标 记 <caption> 表 示 表 格 的 标题 ， 在 一 行 中 除了 <td> 标 记 表 
示 一 个 单元 格 以 外 ， 还 可 以 使 用 <th> 定 义 表格 内 的 表 头 单元 格 。 


【 例 4.5】 (实例 文件 : ch04\4.5.html) 


<!DOCTYPE html> 
<html> 
<head> 
<title> 完 整 表 格 标记 </title> 
<style> 
tfoot{ 
background-color:#FF3; 
} 
</style> 
</head> 
<body> 
<table border="1"> <!-- 设 置 表格 边框 的 粗细 --> 
<caption> 学 生成 绩 单 </caption> 
<thead> 
天 下 开关 
<th> 姓 名 </th><th> 性 别 </th><th> 成 绩 </th> 
</tr> 
</thead> 
<tfoot> 
EE 
<td> 平 均 分 </td><td colspan="2">540</td> 
</tr> 
</tfoot> 
<tbody> 
<tr> 
<td> 张 三 </td><td> 男 </td><td>560</td> 
</Lr> 
<tr> 
<td> 李 四 </td><td> 男 </td><td>520</td> 
过 /zy 
</tbody> 
</table> 
</body> 
</html> 


从 上 面 的 代码 可 以 发 现 ， 使 用 <caption> 标 记 定 义 了 表格 标题 ，<thead>、<tbody> 和 
<tfoot> 标 记 对 表格 进行 了 分 组 。 在 <thead> 部 分 使 用 <th> 标 记 代 替 <td> 标 记 定 义 单元 格 ， 
<th> 标 记 定义 的 单元 格 默认 加 粗 。 网 页 预览 效果 如 图 4-8 所 示 。 
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ba 口 x 

@ 和 站”D:\ 本 书 源 代码 \code 泊 图 ~ 上 
夺 完整 去 格 标 记 x 四 
文 作 H) 编辑 (t) 全 看 (V) 收藏 天 (A) 工具 (1) 
请 各 百 度 一 下 ,你 芳 知道 

学 生成 绩 单 
姓名 | 性 别 成 纲 
张 三 | 男 _j66a 
李 四 | 男 |l520 


0 | 
图 4-8 完整 的 表格 结构 


<caption> 标记 必须 紧 随 <table> 标记 之 后 


4.3 ”综合 实例 一 一 制作 计算 机 报价 单 
利用 所 学 的 表格 知识 ， 制 作 如 图 4-9 所 示 的 计算 机 报价 单 。 


计算 机 报价 单 
到 村 [区 到 


而 片 
要 (Acer) As4552 362G32MNCC 第 记 本 | 站 2799 2 


莽 尔 Dan 14VR-188 笔记 本 | 站 3499 


-一 
| | 

联想 [Lenovo) G470AH2310W42G500P7CW3(DE) CH 第 记 本 ¥4149 区 
| 


惑 尔 家 用 (DELL) 1560SR-656 6 式 3599| | 
宏图 奇 驻 (Htsken HS-5308.TE 8 式 |¥3399 | 
| 


图 4-9 计算 机 报价 单 
具体 操作 步骤 如 下 : 


国 出 新 建 HTML 文档 并 对 其 简化 ， 代 码 如 下 : 
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<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8"/> 
<title> 完 整 表 格 标记 </title> 
</head> 

<body> 

</body> 

</html> 


[0 加 保存 HTML 文件 ， 选 择 相 应 的 保存 位 置 ， 文 件 名 为 “综合 实例 一 制作 计算 机 报价 
单 .html”。 
[加 在 HTML 文档 的 body 部 分 增加 表格 及 内 容 ， 代 码 如 下 : 


<table> 
<caption> 计 算 机 报价 单 </caption> 
<ELE> 
<th> 型 号 </th> 
<th> 类 型 </th> 
<th> 价 格 </th> 
<th> 图 片 </th> 
</tr> 
EP 
<td> 宏 莫 (Acer) AS4552-P362G32MNCC</td> 
<td> 笔 记 本 </td> 
<td>¥2799</td> 
<td><img src="images/Acer.jpg" width="120" height="120"></td> 
</tr> 
EE 
<td> 戴 尔 (Dell) 14VR-188</td> 
<td> 笔 记 本 </td> 
<td>¥3499</td> 
<td><img src="images/Dell.jpg" width="120" height="120"></td> 
</tr> 
2 点 守 2 
<td> 联 想 (Lenovo) G470AH2310W42G500P7CW3 (DB)-CN </td> 
<td> 笔 记 本 </td> 
<td>¥4149</td> 
<td><img src="images/Lenovo.jpg" width="120" height="120"></td> 
</tr> 
<tr> 
<td> 戴 尔 家 用 (DELL) I560SR-656</td> 
<td> 台 式 </td> 
<td>¥3599</td> 
<td><img src="images/DellT.jpg" width="120" height="120"></td> 
<HErS: 
人 <tr 
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<tqd> 宏 图 奇 眩 (Hiteker) HS-5508-TF</td> 

<td> 台 式 </td> 

<td>¥3399</td> 

<td><img src="images/Hiteker.jpg" width="120" height="120"></td> 
</tr> 
<tr> 

<td> 联 想 (Lenovo) G470</td> 

<td> 笔 记 本 </td> 

<td>¥4299</td> 

<td><img src="images/LenovoG.jpg" width="120" height="120"></td> 
</tr> 

</table> 


利用 <caption> 标 记 制 作 表 格 的 标题 ，<th> 代 蔡 <td> 作 为 标题 行 单元 格 。 可 以 将 图 片 放 在 单 
元 格 内 ， 即 在 <td> 标 记 内 使 用 <img> 标 记 。 


It@ 细 在 HIML 文档 的 head 部 分 增加 CSS 样式 ,为 表格 增加 边框 及 相应 的 修饰 ,代码 如 下 : 


<style> 

table{ 
/x* 表 格 增加 线 宽 为 3 的 橙色 实 线 边框 */ 
border:3px solid #F60; 

} 

captiont{ 
/* 表 格 标题 字号 36*/ 
font-size:36px; 

} 

th, ta{ 
/* 表 格 单元 格 (th、td) 增加 边线 */ 
border:lpx solid #F90; 

} 

</style> 


四 加 保存 网 页 后 ， 即 可 查看 最 终 效果 。 


4.4 专家 解 惑 


1. 在 Dreamweaver CC 中 如 何 选 择 多 个 单元 格 ? 

答 : 在 Dreamweaver CC 中 选择 单元 格 的 操作 类 似 于 文字 处 理工 具 Word, 按 住 鼠 标 左 键 拖 
动 ， 经 过 的 单元 格 都 会 被 选择 。 按 住 Ctrl 键 的 同时 依次 单 击 某 个 单元 格 ， 这 些 单元 格 将 会 被 选 
择 ， 选 择 的 单元 格 可 以 是 不 连续 的 。 在 需要 选择 区 域 的 开头 单元 格 中 单 击 ， 按 住 Shift 键 ， 在 
区 域 的 末尾 单元 格 中 单 击 ， 开 头 和 结尾 单元 格 组 成 的 区 域内 的 所 有 单 击 格 将 会 被 选择 。 
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2. 表格 除了 显示 数据 ， 还 可 以 进行 布局 ， 为 何不 使 用 表格 进行 布局 ? 

答 : 在 互联 网 刚刚 开始 普及 时 ， 网 页 非常 简单 ， 形 式 也 非常 单调 ， 当 时 美国 设计 师 David 
Siegel 发 明了 使 用 表格 布局 ， 风 靡 全 球 。 在 表格 布局 的 页 面 中 ， 表 格 不 但 需要 显示 内 容 ， 还 要 
控制 页 面 的 外 观 及 显示 位 置 ， 导 致 页 面 代码 过 多 ， 结 构 与 内 容 无 法 分 离 。 这 样 就 给 网 站 的 后 期 
维护 和 其 他 方面 带 来 了 麻烦 。 

3. 使 用 <thead>、<tbody> 和 <tfoot> 标 记 对 行进 行 分 组 的 意义 何在 ? 

答 : 在 HTML 文档 中 增加 <thead>、<tbody> 和 <tfoot> 标 记 虽 然 从 外 观 上 不 能 看 出 任何 变化 ， 
但 是 它们 却 使 文档 的 结构 更 加 清晰 。 使 用 <thead>、<tbody> 和 <tfoo 亿 标记 除了 使 文档 更 加 清晰 
之 外 , 还 有 一 个 更 重要 的 意义 ， 那 就 是 方便 使 用 CSS 样式 对 表格 的 各 个 部 分 进行 修饰 ， 从 而 制 
作出 更 炫 的 表格 。 


57 人 
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在 网 页 中 ， 表 单 主要 是 用 于 负责 采集 浏览 者 的 相关 数据 ， 如 常见 的 注册 表 、 调 查 表 和 留言 
表 等 。 在 HIML5 中 ， 表 单 拥有 多 个 新 的 表单 输入 类 型 ， 这 些 新 特性 提供 了 更 好 的 输入 控制 和 
验证 。 本 章 主要 讲述 表单 概述 、 表 单 基本 元 素 的 使 用 方法 和 表单 高 级 元 素 的 使 用 方法 ， 最 后 通 
过 一 个 综合 案例 ， 进 一 步 讲 述 表单 的 实用 技巧 。 


5.1 表单 概述 


表单 主要 用 于 收集 网 页 上 浏览 者 的 相关 信息 ， 其 标记 为 <form></form>。 表 单 的 基本 语法 
格式 如 下 : 


<form action="url" method="get|post" enctype="mime"></form> 


其 中 ，action 指定 处 理 提交 表单 的 格式 ， 它 可 以 是 一 个 URL 地 址 或 一 个 电子 邮件 地 址 ; method 
指明 提交 表单 的 HTTP 方法 。enctype 指明 用 来 把 表单 提交 给 服务 器 时 的 互联 网 媒体 形式 。 
表单 是 一 个 能 够 包含 表单 元 素 的 区 域 ， 通 过 添加 不 同 的 表单 元 素 ， 将 显示 不 同 的 效果 。 


【 例 5.1】〔 实 例文 件 : ch05\5.1.html) 


<!DOCTYPE html> 

<html> 

<body> 

<form> 

下 面 是 输入 用 户 登录 信息 <br /> 

用 户 名 称 

<input type="text" name="user"><br /> 
用 户 密码 

<input type="password" name="password"><br /> 
<input type="submit"” value=" 登 录 "> 
</form> 

</body> 

</html> 


在 正 11.0 中 浏览 效果 如 图 5-1 所 示 ， 可 以 看 到 用 户 登录 信息 页 面 。 
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ls Lal x 
| 站 D:\ 本 书 潭 代码 \code 汪 图 ”0 搜索 -… 
|§ Drama\code ett.. x | 
凋 间 百 主 - 下 , 你 40 首 
下 面 是 输入 用 户 登录 信息 
用 户 名 称 
用 户 密码 

登录 


图 5-1 用 户 登录 页 面 


5.2 ”表单 基本 元 素 的 使 用 


表单 元 素 是 能 够 让 用 户 在 表单 中 输入 信息 的 元 素 ， 常 见 的 有 文本 框 、 密 码 框 、 下 拉 菜 单 、 
单 选 按钮 、 复 选 框 等 。 


5.2.1 单行 文本 输入 框 text 


文本 框 是 一 种 让 访问 者 自行 输入 内 容 的 表单 对 象 ， 通 常 被 用 来 填写 单个 字 或 简短 的 回答 ， 
如 用 户 姓 名 和 地 址 。 代 码 格式 如 下 : 


<input type="text" name="..." size="..." maxlength="..." value="..."> 


其 中 ，type="text" 定 义 单行 文本 输入 框 ，name 属性 定义 文本 框 的 名 称 ， 要 保证 数据 的 准确 
采集 ， 必 须 定义 一 个 独一无二 的 名 称 ; size 属性 定义 文本 框 的 宽度 ， 单 位 是 单个 字符 宽度 ; 
maxlength 属性 定义 最 多 输入 的 字符 数 ，value 属性 定义 文本 框 的 初始 值 。 


【 例 5.2】 实例 文件 ，ch05\5.2.html) 

<!DOCTYPE html> 

<html> 

<head><title> 输 入 用 户 的 姓名 </title></head> 

<body> 

<form> 

请 输入 您 的 姓名 : 

<input type="text" name="yourname" size="20" maxlength="15"><br /> 
请 输入 您 的 地 址 : 

<input type="text" name="youradr" size="20" maxlength="15"> 
</form> 

</body> 

</html> 


在 正 11.0 中 浏览 效果 如 图 5-2 所 示 ， 可 以 看 到 两 个 单行 文本 输入 框 。 
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- 口 x 
辣 ”D:\ 本 书 源 代码 \code 六 图 ”| 搜索 . 
碟 输入 用 户 的 姓名 x 加 


请 各 百度 一 下 , 你 就 知道 


请 输入 您 的 姓名 : 
您 的 地 址 : 


图 5-2 单行 文本 输入 框 


5.2.2 ”多 行文 本 框 标记 <textarea> 
多 行文 本 框 标 记 <textarea> 主 要 用 于 输入 较 长 的 文本 信息 。 代 码 格 式 如 下 : 
<textarea name="..." coOls="..." IOWS="..." Wrap="..."></textarea > 


其 中 ，name 属性 定义 多 行文 本 框 的 名 称 ， 要 保证 数据 的 准确 采集 ， 必 须 定义 一 个 独 一 无 
二 的 名 称 ; cols 属性 定义 多 行文 本 框 的 宽度 ， 单 位 是 单个 字符 宽度 ; rows 属性 定义 多 行文 本 框 
的 高 度 ， 单 位 是 单个 字符 高 度 ，wrap 属性 定义 输入 内 容 大 于 文本 域 时 显示 的 方式 。 


【 例 5.3】〔 实 例文 件 ，ch05\5.3.html) 


<!DOCTYPE html> 

<html> 
<head><title> 多 行文 本 输入 </title></head> 
<body> 

<form> 

请 输入 您 最 新 的 工作 情况 <br /> 

<textarea name="yourworks" cols="50" rows="5"></textarea> 
< /> 

<input type="submit" value=" 提 交 "> 
</form> 

</body> 

</html> 


在 正 11.0 中 浏览 效果 如 图 5-3 所 示 ， 可 以 看 到 多 行文 本 框 。 


三 ，- 息 ，。 着 
闫 ”DD:\ 本 书 源 代码 \code 诺 国 ~ 中 搜索- 

ls 多 行文 本 输入 x 

言 客 百度 一 下 ， 你 就 知 适 

请 输入 您 最 新 的 工作 情况 


提交 


图 5-3 多 行文 本 框 


使 用 表单 第 5 剖 


5.2.3 密码 域 password 


密码 输入 框 是 一 种 特殊 的 文本 域 , 主要 用 于 输入 一 些 保密 信息 。 当 网 页 浏览 者 输入 文本 时 ， 
显示 的 是 黑 点 或 其 他 符号 ， 这 样 就 增加 了 输入 文本 的 安全 性 。 代 码 格式 如 下 : 


<input type="password" name="..." size="..." maxlength="..."> 


其 中 ，type="password" 定 义 密码 框 ; name 属性 定义 密码 框 的 名 称 ， 要 保证 唯一 性 ，size 属 
性 定义 密码 框 的 宽度 ， 单 位 是 单个 字符 宽度 maxlength 属性 定义 最 多 输入 的 字符 数 。 


【 例 5.4】〔 实 例文 件 ，ch05\5.4.html) 


<!DOCTYPE html> 

<html> 

<head><title> 输 入 用 户 姓名 和 密码 </title></head> 
<body> 

<form > 

用 户 姓 名 : 

<input type="text" name="yourname"> 

<br /> 

登录 密码 : 

<input type="password" name="yourpw"><br /> 
</form> 

</body> 

</html> 


在 正 11.0 中 浏览 效果 如 图 5-4 所 示 , 输 入 用 户 名 和 密码 时 可 以 看 到 密码 以 黑 点 的 形式 显示 。 


名 ”D:\ 本 书 源 代码 \code 计 图 ~ 他 搜索 .… 
大 输入 用 户 姓名 和 密码 x | 


音 当 百 度 一 下 ， 你 就 知道 


用 户 姓名 :|tianyi 


登录 密码 [eeeeeeseeceeo] ~ 


图 5-4 密码 输入 框 


5.2.4 ” 单 选 按钮 radio 
单 选 按 钮 主要 是 让 网 页 浏览 者 在 一 组 选项 里 只 能 选 其 一 。 代 码 格式 如 下 : 
<input type="radio" name="..." value = "..."> 


其 中 ，type="radio" 定 义 单 选 按 钮 ，name 属性 定义 单 选 按钮 的 名 称 ， 单 选 按钮 都 是 以 组 为 
单位 使 用 的 ， 在 同一 组 中 的 单 选项 都 必须 用 同一 个 名 称 ; value 属性 定义 单 选 按钮 的 值 ， 在 同 
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一 组 中 它们 的 域 值 必须 是 不 同 的 。 


【 例 5.5】〔 实 例文 件 ，ch05\5.5.html) 
<!DOCTYPE html> 


<html> 
<head><title> 选 择 感 兴趣 的 图 书 </title></head> 
<body> 

<form > 

请 选择 您 感 兴趣 的 图 书 类 型 : 

< > 


<input type="radio" name="book" value="Book1"> 网 站 编程 <br /> 
<input type="radio" name="book" value="Book2"> 办 公 软 件 <br /> 
<input type="radio" name="book" value="Book3"> 设 计 软件 <br /> 
<input type="radio" name="book" value="Book4"> 网 络 管理 <br /> 
<input type="radio" name="book" value="Book5"> 黑 客 攻防 <br /> 
</form> 
</body> 
</html> 


在 正 11.0 中 浏览 效果 如 图 5-5 所 示 , 即 可 看 到 5 个 单 选 按钮 ,用 户 只 能 选中 一 个 单 选 按钮 。 


—- 0O x 
站 ”D:\ 本 书 源 代码 \code 泊 图 ~ 中 搜索.… 

后 选择 感 兴 趣 的 图 书 x | 

次 各 百度 一 下 ,你 就 知道 

请 选择 您 感 兴趣 的 图 书 类 型 : 

O 〇 网 站 

〇 办公 软 件 

〇 设计 软件 

图 网 络 管理 

口 黑客 攻防 


图 5-5 单 选 按钮 


5.2.5” 复 选 框 checkbox 


复 选 框 主要 是 让 网 页 浏览 者 在 一 组 选项 里 可 以 同时 选择 多 个 选项 , 每 个 复 选 框 都 是 一 个 独 
立 的 元 素 ， 必 须 有 一 个 唯一 的 名 称 。 代 码 格式 如 下 : 


<input type="checkbox" name="." Value ="."> 


其 中 ，type="checkbox" 定 义 复 选 框 ; name 属性 定义 复 选 框 的 名 称 ， 在 同一 组 中 的 复 选 框 
都 必须 用 同一 个 名 称 ; value 属性 定义 复 选 框 的 值 。 
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【 例 5.6】〔 实 例文 件 ，ch05\5.6.html) 
<!DOCTYPE html> 


<html> 
<head><title> 选 择 感 兴 趣 的 图 书 </title></head> 
<body> 

<form > 


请 选择 您 感 兴趣 的 图 书 类 型 : <br /> 

<input type="checkbox" name="book" value="Book1"> 网 站 编程 <br /> 

<input type="checkbox" name="book" value="Book2"> 办 公 软 件 <br /> 

<input type="checkbox" name="book" value="Book3"> 设 计 软 件 <br /> 

<input type="checkbox" name="book" value="Book4"> 网 络 管理 <br /> 

<input type="checkbox" name="book" value="Book5" checked> 黑 客 攻 防 <br /> 
</form> 

</body> 

</html> 


checked 属性 主要 用 来 设置 默认 选中 项 。 
枝 巧 提示 


在 正 11.0 中 浏览 效果 如 图 5-6 所 示 ， 即 可 看 到 5 个 复 选 框 ， 其 中 【黑客 攻防 】 复 选 框 被 默 
认 选 中 。 


- 0O x 
名 Di:\ 相 书 源 代 罗 \codeWj 图 - 中】 搜索. 
| 忆 滑 兴 直 的 图 书 
请 当下, frm 
口 R 


感 兴趣 的 图 书 类 型 : 
悍 


口 办 公 软 件 
口 设计 软件 
口 网 络 管理 


图 5-6 复 选 框 


5.2.6 选择 列表 标记 <select> 


下 拉 列 表 主 要 用 于 在 有 限 的 空间 里 设置 多 个 选项 ， 它 既 可 以 用 作 单 选 ， 也 可 以 用 作 多 选 。 
代码 格式 如 下 : 

<select name="..." size="..." multiple> 

<option value="..." selected> 

en 


</select> 
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其 中 ，name 属性 定义 选择 列表 的 名 称 ; size 属性 定义 选择 列表 的 行 数 ，multiple 属性 表示 
可 以 多 选 ， 如 果 不 设置 该 属性 ， 则 只 能 单 选 ，value 属性 定义 选择 项 的 值 ，selected 属性 表示 默 
认 已 经 选择 本 选项 。 


【 例 5.7】 实例 文件 : ch05\5.7.html) 


<!DOCTYPE html> 

<html> 
<head><title> 选 择 感 兴趣 的 图 书 </title></head> 
<body> 

<form> 

请 选择 您 感 兴趣 的 图 书 类 型 : <br /> 

<select name="fruit" size="3" multiple> 
<option value="Book1"> 网 站 编程 

<option value="Book2"> 办 公 软 件 

<option value="Book3"> 设 计 软 件 

<option value="Book4"> 网 络 管理 

<option value="Book5"> 黑 客 攻 防 

</select> 

</form> 

</body> 

</html> 


在 正 11.0 中 浏览 效果 如 图 5-7 所 示 ， 列 表 内 显示 了 3 个 选项 ， 用 户 可 以 按 住 Ctrl 键 选择 
多 个 选项 。 


- 口 x 
局 D:\ 本 书 源 代码 code\ 六 国 ”已 搜索 .. 
后 选择 感 兴趣 的 图 书 x | 
请 各 百度 一 下 ,你 就 知道 
请 选择 您 感 兴趣 的 图 书 类 型 : 


作 


伏 计 软件 Y| 


图 5-7 选择 列表 


5.2.7 普通 按钮 button 
普通 按钮 用 来 控制 其 他 定义 了 脚本 的 处 理工 作 。 代 码 格式 如 下 : 


<input type="button" name="..." value="..." onclick="..."> 


其 中 ，type="button" 定 义 普通 按钮 ，name 属性 定义 普通 按钮 的 名 称 ，value 属性 定义 按钮 
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的 显示 文字 ; onclick 属性 表示 单 击 行为 ， 也 可 以 通过 指定 脚本 函数 来 定义 按钮 的 行为 。 


【 例 5.8】〔 实 例文 件 ，ch05\5.8.html) 


<!DOCTYPE html> 

<html> 

<body> 

<form> 

点 击 下 面 的 按钮 ， 把 文本 框 1 的 内 容 复 制 到 文本 框 2 中 : 

<br/> 

文本 框 1: <input type="text" id="fieldl"” value=" 学 习 HTML5 的 技巧 "> 

<br/> 

文本 框 2: <input type="text" id="field2"> 

<br/> 

<input type="button" name="..." value=" 单 击 我 " 
onclick="document .getElementById('field2') .value=document .getElementById('f 
ieldl1') .value"> 

</form> 

</body> 

</html> 


在 下 11.0 中 浏览 效果 如 图 5-8 所 示 ，, 单 击 【 单 击 我 】 按钮 即 可 将 文本 框 1 中 的 内 容 复制 到 
文本 框 2 中。 


- 0O x 
问 ”D\ 本 书 源 代码 \code 洋 图 ~ 人 搜索. 
|@ Dx 本 书 源 fcodev 源 多- x | 
次 各 百度 一 下 , 你 就 知道 
i 下 面 的 按钮 ， 把 文本 框 1 的 内 容 指 贝 到 文本 框 2 
中 : 


图 5-8 单 击 按钮 后 的 复制 效果 


5.2.8 提交 按钮 submit 
提交 按钮 用 来 将 输入 的 信息 提交 到 服务 器 。 代 码 格式 如 下 : 
<input type="submit" name="..." value="..."> 


其 中 ，type="submit" 定 义 提交 按钮 ，name 属性 定义 提交 按钮 的 名 称 ，value 属性 定义 按钮 
的 显示 文字 。 通 过 提交 按钮 可 以 将 表单 里 的 信息 提交 给 action 所 指向 的 文件 。 
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【 例 5.9】〔 实 例文 件 ，ch05\5.9.html) 


<!DOCTYPE html> 

<html> 
<head><title> 输 入 用 户 名 信息 </title></head> 
<body> 

<form action="http://www.yinhangit.com/yonghu.asp" method="get"> 
请 输入 您 的 姓名 : 

<input type="text" name="yourname"> 
<br /> 

请 输入 您 的 住址 : 

<input type="text" name="youradr"> 
Or 

请 输入 您 的 单位 : 

<input type="text" name="yourcom"> 
BE 

请 输入 您 的 联系 方式 : 

<input type="text" name="yourcon"> 
<br /> 

<input type="submit" value=" 提 交 "> 
</form> 

</body> 

</html> 


在 正 11.0 中 浏览 效果 如 图 5-9 所 示 , 输入 内 容 后 单 击 【 提 交 】 按 钮 ， 即 可 将 表单 中 的 数据 
提交 到 指定 的 服务 器 中 。 


名 “DA 三 书 昼 代 古 KodeV 国 ”| 搜索 


图 5-9 提交 按钮 


5.2.9 重 置 按钮 reset 
重 置 按钮 用 来 清空 表单 中 输入 的 信息 。 代 码 格式 如 下 : 


<input type="reset" name="..." value="..."> 


其 中 ，type="reset" 定 义 重 置 按钮 ，name 属性 定义 重 置 按钮 的 名 称 ;，value 属性 定义 按钮 的 
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【 例 5.10】 实例 文件 ，ch05\5.10.html) 
<!DOCTYPE html> 

<html> 

<body> 

<form> 

请 输入 用 户 名 称 : 

<input type="text"> 

<br/> 

请 输入 用 户 密码 : 

<input type="password"> 

br /> 

<input type="submit" value=" 登 录 "> 
<input type="reset" value=" 重 置 "> 
</form> 

</body> 

</html> 


在 正 11.0 中 浏览 效果 如 图 5-10 所 示 ， 输 入 内 容 后 单 击 【 重 置 】 按 钮 ， 即 可 实现 将 表单 中 
的 数据 清空 的 目的 。 


- OO x 
印 “D:\ 本 书 源 代码 vode 国 ~ 所 搜索 . 

| 时 Da 本 书 源 fH9Ncode\ 源 代 .。 

请 汪 百 度 一 下 , 你 WX0 首 


请 输入 用 户 名 称 : 
请 输入 用 户 密码 ; 
[要 | 


图 5-10 【 重 置 】 按 钮 


5.3 ”表单 高 级 元 素 的 使 用 


除了 上 述 基 本 属性 外 , HTML5 中 还 有 一 些 高 级 属性 , 包括 url、 eamil、 time、 range、search 
等 。 对 于 部 分 高 级 属性 ，IE 11.0 浏览 器 暂时 还 不 支持 ， 下 面 将 用 Opera 11.60 浏览 器 查看 效果 。 


5.3.1 url 属性 


url 属性 用 于 说 明 网 站 网 址 ， 显 示 为 在 一 个 文本 框 中 输入 URL 地 址 ， 在 提交 表单 时 会 自动 
验证 url 的 值 。 代 码 格式 如 下 : 


<input type="url" name="userurl"/> 


另外 ,用户 可 以 使 用 普通 属性 设置 url 输入 框 , 例如 可 以 使 用 max 属性 设置 其 最 大 值 、 min 


HTJmL5+CSS3+TjQuery Jmobile+Bootstrap 开发 APP 从 入 门 到 精通 〈 视 频 教 学 版 ) 


属性 设置 其 最 小 值 、step 属性 设置 合法 的 数字 间隔 、value 属性 规定 其 默认 值 。 对 于 另外 的 高 级 
属性 中 同样 的 设置 不 再 重复 讲述 。 


【 例 5.11】〔 实 例文 件 : ch05\5.11.html) 


<!DOCTYPE html> 

<html> 

<body> 

<form> 

<br/> 

请 输入 网 址 : 

<input type="url" name="userurl"/> 
</form> 

</body> 

</html> 


在 正 11.0 中 浏览 效果 如 图 5-11 所 示 ， 用 户 即 可 在 文本 框 中 输入 相应 的 网 址 。 如 果 输 入 的 
url 格式 不 准确 ， 按 Enter 键 后 就 会 弹出 提示 信息 。 


- 0O x 
@ 缚 file///D:/ 本 书 源 代码 /c 国 ”| 搜索 .… 
总 Di:\ 本 书 源 代码 \code\ 源 代 .. x | 
育 当 百 度 一 下 ， 你 就 知道 


你 必须 输入 有 效 URL 


图 5-11 url 属性 的 效果 


5.3.2 eamil 属性 


与 url 属性 类 似 ,email 属性 用 于 让 浏览 者 输入 E-mail 地 址 , 在 提交 表单 时 会 自动 验证 email 
域 的 值 。 代 码 格式 如 下 : 


<input type="email" name="user email"/> 


【 例 5.12】〔 实 例文 件 ， ch05\5.12.html) 
<!DOCTYPE html> 
<html> 
<body> 
<form> 
<br/> 
请 输入 您 的 邮箱 地 址 : 


<input type="email" name="user email"/> 
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<br /> 
<input type="submit"” value=" 提 交 "> 
</form> 
</body> 
</html> 


在 下 11.0 中 浏览 效果 如 图 5-12 所 示 ， 用 户 即 可 在 文本 框 中 输入 相应 的 邮箱 地 址 。 如 果 用 
户 输 入 的 邮箱 地 址 不 合法 ， 单 击 【提交 】 按钮 后 会 弹出 图 中 的 提示 信息 。 


= 口 x 
@ 他 ”D\ 本 书 源 代码 \code 刘 图 -~ 人。 搜索. 
夸 D:\ 本 书 源 代码 \code\ 源 代 … 
请 各 百度 一 下 ， 你 闲 知 首 


请 输入 您 的 邮箱 地 址 : ladsfadsfasdfasd x 
提交 


你 必须 输入 有 效 电子 邮件 地 址 


图 5-12 eamil 属性 的 效果 


5.3.3 date 和 Times 


HTMLS5 新 增 了 一 些 日 期 和 时 间 输 入 类 型 , 其 中 包括 date、datetime、datetime-local、 month、 
week 和 time， 它 们 的 具体 含义 如 表 5-1 所 示 。 


表 5-1 日 期 和 时 间 输 入 类 型 


属性 含义 

date 选取 日 、 月 、 年 

month 选取 月 、 年 

week 选取 周 和 年 

time 选取 时 间 

datetime 选取 时 间 、 日 、 月 、 年 
datetime-local 选取 时 间 、 日 、 月 、 年 (本 地 时 间 )》 


上 述 属性 的 代码 格式 类 似 ， 以 date 属性 为 例 ， 代 码 格式 如 下 : 


<input type="date" name="user date" /> 


【 例 5.13】〔 实 例文 件 :， ch05\5.13.html) 
<!DOCTYPE html> 

<html> 

<body> 
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<form> 

<br/> 

请 选择 购买 商品 的 日 期 : 

<br /> 

<input type="date" name="user date"/> 
</form> 

</body> 

</html> 


在 Opera 11.60 中 浏览 效果 如 图 5-13 所 示 ， 用 户 单 击 输入 框 中 的 下 三 角 按钮 ， 即 可 在 弹出 
的 窗口 中 选择 需要 的 日 期 。 


13html x Be 2 


CB filey//D:/ 本 地 源 代码 /code/ 源 代码 /ch0; 
请 选择 购买 商品 的 日 期 
年 W/ 月 /日 Sv 
2018 征 09 月- a elle 


周一 周二 恩 三 周 四 周 五 周 六 周 日 | 


图 5-13 date 属性 的 效果 


5.3.4 number 属性 


number 属性 提供 了 一 个 输入 数字 的 输入 类 型 ， 用 户 可 以 直接 输入 数字 或 通过 单 击 微调 杠 
中 的 按钮 选择 数字 。 代 码 格式 如 下 : 


<input type="number" name="shuzi" /> 


【 例 5.14】〔 实 例文 件 ， ch05\5.14.html) 


<!DOCTYPE html> 

<html> 

<body> 

<form> 

<br/> 

此 网 站 我 曾经 来 

<input type="number"” name="shuzi"/> 次 了 哦 ! 
</form> 

</body> 

</html> 
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在 Opera 11.60 中 浏览 效果 如 图 5-14 所 示 ， 用 户 可 以 直接 输入 数字 ， 也 可 以 单 击 微调 按钮 
选择 合适 的 数字 。 


办 514html x 二 | me 4 
< CG 田 ”日 ”filexy//D:/ 丕 书 源 代 码 /code/ 源 代码 /ch0 
此 网 站 我 普 经 来 全 了 咏 ! 


图 5-14 number 属性 的 效果 
强烈 建议 用 户 使 用 min 和 max 属性 规定 输入 的 最 小 值 和 最 大 值 。 
较 巧 提示 


5.3.5 range 属性 


range 属性 可 以 显示 一 个 滚动 的 控件 ， 用 户 可 以 使 用 max、min 和 step 属性 设置 控件 的 范 
围 。 代 码 格式 如 下 : 


<input type="range" name="" min="" max="" /> 
其 中 min 和 max 属性 分 别 控制 滚动 控件 的 最 小 值 和 最 大 值 。 


【 例 5.15】 (实例 文件 : ch05\5.15.html) 


<!DOCTYPE html> 

<html> 

<body> 

<form> 

<br/> 

英语 成 绩 公布 了 ! 我 的 成 绩 名 次 为 : 

<input type="range" name="ran" min="1" max="10"/> 
</form> 

</body> 

</html> 


在 正 11.0 中 浏览 效果 如 图 5-15 所 示 ， 用 户 可 以 拖 忠 滑 块 选择 合适 的 数字 。 


a x 
| 名 DA 不 书 淹 ft 友 Kode 放 图 | 要 二 Dp- 

|§ Demtemvcode\mre. x | 

记 分 百 芭 一下， 人 3 知 天 


3 


英语 成 绩 公布 了 ! 我 的 成 绩 名 名 次 为 : Emm 


图 5-15 ”range 属性 的 效果 
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歌 认 情 况 下 ， 清 闫 位 于 滚珠 的 中 间 位 置 ， 如 果 用 户 指定 的 最 大 值 小 于 最 小 值 ， 则 克 
许 使 用 反 向 滚动 轴 ， 目 前 浏览 器 对 这 一 属性 还 不 能 很 好 地 支持 ， 
枝 巧 得 示 


5.3.6 ”required 属性 


required 属性 规定 必须 在 提交 之 前 填写 输入 域 不 能 为 空 ) 。required 属性 适用 于 以 下 类 型 的 
输入 属性 : text、search、url、email、password、date、pickers、number、checkbox、radio 等 。 


【 例 5.16】〔 实 例文 件 : ch05\5.16.html) 


<!DOCTYPE html> 

<html> 

<body> 

<form> 

下 面 是 输入 用 户 登 录 信息 

<br /> 

用 户 名 称 

<input type="text" name="user" required="required"> 
bE > 

用 户 密码 

<input type="password" name="password" required="required"> 
Dr 

<input type="submit" value=" 登 录 "> 

</form> 

</body> 

</html> 


在 正 11.0 中 浏览 效果 如 图 5-16 所 示 ， 如 果 用 户 只 输入 密码 就 单 击 【 登 录 】 按 钮 ， 则 会 弹 
出 图 中 的 提示 信息 。 


- 0O x 
旬 。Dx\ 本 书 源 代 码 code\j 国 ”搜索 .… 

导 D:\ 本 书 源 代码 \code\ 源 代 .. x | 

请 沁 百 度 一 下 ， 你 8 知道 


登录 | | 这 是 必 填 字段 


图 5-16 required 属性 的 效果 
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5.4 ”综合 实例 一 一 创建 用 户 反馈 表单 


本 实例 将 结合 使 用 一 个 表单 内 的 各 种 元 素 , 来 开发 一 个 简单 网 站 的 用 户 意见 反馈 页 面 。 具 
体操 作 步 又 如 下 : 


面 上 方 给 出 标题 ， 标 题 下 方 
面 时 ， 需 要 把 “用 户 注册 ” 


L@ 国 分 析 需 求 。 反 馈 表 单 非常 简单 ， 通 常 包含 三 个 部 分 : 在 
是 正文 部 分 (表单 元 素 ); 最 下 方 是 表单 元 素 提交 按钮 。 在 设计 
标题 设置 成 hl 大 小 ， 正 文 使 用 <p> 标 记 来 限制 表单 元 素 。 

[0 构建 HTML 页 面 ， 实 现 表单 内 容 。 


凤 对 


<!DOCTYPE html> 

<html> 

<head> 

<title> 用 户 反馈 页 面 </title> 

</head> 

<body> 

<hl align=center> 用 户 反馈 表单 </h1> 

<form method="post"> 

<p> 姓 gnbsp; gnbsp; gnbsp; gnbsp; 名: 

<input type="text" class=txt size="12" maxlength="20" name="username"/> 
</p><p> 性 gnbsp; gnbsp; gnbsp; gnbsp; 别 : 
<input type="radio" value="male"/> 男 
<input type="radio" value="female"/> 女 
</p><p> 年 snbsp;&nbsp;&gnbsp;&nbsp; 龄 
<input type="text" class=txt name="age"/> 


</p> 

<p> 联 系 电话 : 

<input type="text" class=txt name="tel"/> 
</p><p> 电 子 邮 件 : 

<input type="text" class=txt name="email"/> 
</p><p> 联 系 地 址 : 

<input type="text" class=txt name="address"/> 
</p> 

<p> 


请 输入 您 对 网 站 的 建议 <br /> 

<textarea name="yourworks" cols="50" rows="5"></textarea> 
br > 

<input type="submit" name="submit" value=" 提 交 "/> 

<input type="reset" name="reset" value=" 清 除 "/> 

</p> 

</form> 

</body> 

</html> 


在 正 11.0 中 浏览 效果 如 图 5-17 所 示 。 
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I 全 D:\ 本 书 滨 代 码 \code 迹 图 ”C0 扰 案 只 -| 而 
半 用 户 反 污 页 面 J 
请 EB 下 , trai 


用 户 反 馈 表 单 


~ 


性 ” 别 ，O 男 O 女 
年 。 失 : 
联系 电话 : 
电子 邮件 
联系 地 址 : 


请 输入 您 对 网 站 的 建议 


了 [ER 


图 5-17 用 户 反馈 页 面 


5.5 专家 解 惑 


1. 如 何在 表单 中 实现 文件 上 传 框 ? 

在 HTML5 语言 中 ,使 用 file 属 性 实现 文件 上 传 框 .语法 格式 为 :<input type="file" name="..…" 
size="..." maxlength="...">。 其 中 ，type="file" 定 义 为 文件 上 传 框 ; name 属性 为 文件 上 传 框 的 名 
称 ; size 属性 定义 文件 上 传 框 的 宽度 ,单位 是 单个 字符 宽度 ; maxlength 属性 定义 最 多 输入 的 字 
符 数 。 文 件 上 传 框 的 显示 效果 如 图 5-18 所 示 。 


—- OO x 
丫 ”D:\ 本 书 源 代码 \code 煌 图 ~ 上 

乱 D:\ 本 书 源 代码 \code\ 源 代 .. x | 上 

己 当 百 度 一 下 ,你 就 知道 


图 5-18 文件 上 传 框 


2. 制作 的 单 选 按 钮 为 什么 只 能 选中 一 个 ? 


此 时 用 户 需要 检查 单 选 按钮 的 名 称 ， 保 证 同一 组 中 的 单 选 按钮 名 称 必须 相同 ， 这 样 才能 保 
证 单 选 按钮 只 能 选中 其 中 一 个 。 
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目前 ， 在 网 页 上 没有 关于 音频 和 视频 的 标准 ， 多 数 音频 和 视频 都 是 通过 插件 来 播放 的 ， 为 
此 ，HTML5 新 增 了 音频 和 视频 的 标记 。 本 章 将 讲述 音频 和 视频 的 基本 概念 、 常 用 属性 、 解 码 
器 和 浏览 器 的 支持 情况 。 


6.1 <audio> 标 记 


目前 ， 大 多 数 音频 是 通过 插件 来 播放 的 ， 如 常见 的 播放 插件 Flash， 这 就 是 为 什么 用 户 在 
用 浏览 器 播放 音乐 时 ， 常 常 需要 安装 Flash 插件 的 原因 。 但 是 并 不 是 所 有 的 浏览 器 都 拥有 同样 
的 插件 。 

与 HIML4 相 比 ，HIML5 新 增 了 <audio> 标 记 ， 规 定 了 一 种 包含 音频 的 标准 方法 。 


6.1.1 <audio> 标 记 概述 


<Audio> 标 记 主要 是 定义 播放 声音 文件 或 音频 流 的 标准 。 支 持 3 种 音频 格式 ， 分 别 为 ogg、 
mp3 和 wav。 
如 果 需 要 在 HIML5 网 页 中 播放 音频 ， 则 输入 的 基本 格式 如 下 : 


<audio src="song.mp3" controls="controls"> 
</audio> 


其 中 sre 属性 是 规定 要 播放 的 音频 地 址 ， controls 属性 是 提供 添加 播放 、 暂 停 和 音量 


另外 ， 在 <audio> 与 </audio> 之 间 插 入 的 内 容 是 供 不 支 持 audio 元 素 的 浏览 器 显示 的 。 


【 例 6.1】 《实例 文件 : ch06\6.1.html) 


<!DOCTYPE html> 
<html> 

<head> 
<title>audio</title> 
<head> 
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<body> 
<audio src="song.mp3" controls="controls"> 
您 的 浏览 器 不 支持 audio 标 记 ! 
</audio> 
</body> 
</html> 


如 果 用 户 的 浏览 器 是 IE 8.0 或 以 前 的 版 本 , 浏览 效果 如 图 6-1 所 示 , 可 见 目前 正 浏览 器 还 
不 支持 <audio> 标 记 。 

在 正 11.0 中 浏览 效果 如 图 6-2 所 示 ， 可 以 看 到 加 载 的 音频 控制 条 ， 并 能 听 到 加 载 的 音频 
文件 。 


= 学 “加 _ 洲 
J [ews Pp- ex| Swdo l 六 DA 下 书 要 代码 code 站 图 -出 | 搜索 A- 
En Eu 和 了 
售 的 浏览 器 不 支持 audic 标 记 文件 (F) 篇 加 ( 日 查看 (V】 收 苇 夹 (A) 工具 帮助 (H) 


请 兰 百 区- 下， 45 理 


OO 0:00:11 国 ) 国 


图 6-1 不 支持 <audio> 标 记 的 效果 图 6-2 ”支持 <audio> 标 记 的 效果 


6.1.2 ”<audio> 标 记 的 属性 
<audio> 标 记 的 常见 属性 和 含义 如 表 6-1 所 示 。 


表 6-1 <audio> 标 记 常 见 属性 


属性 值 描述 
autoplay Autoplay (自动 播放 ) | 如 果 出 现 该 属性 ， 则 音频 在 就 绪 后 马上 播放 
controls Controls (控制 ) 如 果 出 现 该 属性 ， 则 向 用 户 显示 控件 ， 如 播放 按钮 
loop Loop (循环 ) 如 果 出 现 该 属性 ， 则 每 当 音频 结束 时 重新 开始 播放 
如 果 出 现 该 属性 , 则 音频 在 页 面 加 载 时 进行 加 载 , 并 预备 播放 。 
preload Preload (加 载 ) 
如 果 使 用 autoplay， 则 忽略 该 属性 
SIC ul (地 址 ) 要 播放 的 音频 的 URL 地址 


另外 ，<audio> 标 记 可 以 通过 source 属性 添加 多 个 音频 文件 。 具 体格 式 如 下 : 


<audio controls="controls"> 


<source src="123.0gg" type= 


<source src="123.mp3" type= 


audio/ogg"> 
audio/mpeg"> 
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</audio> 


6.1.3 音频 解码 器 

音频 解码 器 定义 了 音频 数据 流 编 码 和 解码 的 算法 。 其中, 编码 器 主要 是 对 数据 流 进行 编码 
操作 ， 用 于 存储 和 传输 ， 解 码 器 主要 是 对 音频 文件 进行 解码 ， 然 后 进行 播放 操作 。 目 前 ， 使 用 
较 多 的 音频 解码 器 是 Vorbis 和 ACC。 


6.1.4 ”<audio> 标 记 浏览 器 的 支持 情况 


不 同 的 浏览 器 对 <audio> 标记 支持 也 不 同 。 表 6-2 列 出 了 应 用 比较 广泛 的 浏览 器 对 <audio> 
标记 的 支持 情况 。 


表 6-2 ”<audio> 标 记 的 浏览 器 支持 情况 


浏览 器 Firefox 3.5 及 | IE 9.0 及 更 | Opera 10.5 及 | Chrome 3.0 及 更 | Safari 3.0 及 
音频 格式 更 高 版 本 更 高 版 本 更 高 版 本 


6.2 ”<video> 标 记 

与 音频 文件 播放 方式 一 样 ， 大 多 数 视频 文件 在 网 页 上 也 是 通过 插件 来 播放 的 ,常见 的 播放 
插件 Flash。 由 于 不 是 所 有 的 浏览 器 都 拥有 同样 的 插件 ， 所 以 需要 一 种 统一 的 包含 视频 的 标准 
方法 。 与 HIML4 相 比 ，HTML5 新 增 了 <video> 标 记 。 
6.2.1 <video> 标 记 概述 

video 标记 主要 是 定义 播放 视频 文件 或 视频 流 的 标准 。 支 持 3 种 视频 格式 ， 分 别 为 Ogg、 
WebM 和 MPEG4。 

如 果 需 要 在 HIML5 网 页 中 播放 视频 ， 输 入 的 基本 格式 如 下 : 

<video src="123.mp4" controls="controls"></ video > 


另外 ， 在 < video > 与 </ video > 之 间 插 入 的 内 容 是 供 不 支持 video 元 素 的 浏览 器 显示 的 。 


【 例 6.2】〔 实 例文 件 ，ch06\6.2.html) 


<!DOCTYPE html> 
<html> 
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<head> 
<title>video</title> 
<head> 
<body> 


<video src="123.mp4" controls="controls"> 


您 的 浏览 器 不 支持 video 标 记 ! 
</video> 

</body> 

</html> 


如 果 用 户 的 浏览 器 是 正 11.0 之 前 的 版 本 ， 则 浏览 效果 如 图 6-3 所 示 ， 可见 正 11.0 之 前 的 


版 本 浏览 器 不 支持 <video> 标 记 。 


在 下 11.0 中 浏览 效果 如 图 6-4 所 示 ， 可 以 看 到 加 载 的 视频 控制 条 界面 。 单 击 【播放 】 按 


钮 ， 即 可 查看 视频 的 内 容 。 
i -= > 


国 pwzwmswgk Do xB video 
文才。 所 弛 E) 喜 看 V) 疏 大夫 A。 工具 大 HH) 


您 的 浏览 器 不 支持 video 标 签 ! 


图 6-3 不 支持 <video> 标 记 的 效果 


6.2.2 ”<video> 标 记 的 属性 


<video> 标 记 的 常见 属性 和 含义 如 表 6-3 所 示 。 


图 6-4 支持 <video> 标 记 的 效果 


表 6-3 ”<video> 标 记 常见 属性 


autoplay autoplay 如 果 出 现 该 属性 ， 则 视频 在 就 绪 后 马上 播放 


如 果 出 现 该 属性 ， 


controls controls 则 向 上 


户 显 示 控 件 ， 如 播放 按钮 
loop loop 如 果 出 现 该 属性 ， 则 每 当 视 频 结束 时 重新 开始 播放 


preload preload 


如 果 出 现 该 属性 ， 则 视频 在 页 面 加 载 时 进行 加 载 ， 并 预备 播放 
如 果 使 用 "autoplay"， 则 忽略 该 属性 


要 播放 的 视频 的 URL 


ul 
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( 续 表 ) 
属性 什 描述 
width | 宽度 值 | 设置 视频 播放 器 的 宽度 
height 。 | 高 度 值 “| 设置 视频 播放 器 的 高 度 

当 视频 未 响应 或 缓冲 不 足 时 ， 该 属性 值 链接 到 一 个 图 像 。 该 图 像 将 以 一 
加 | 定 的 比例 被 显示 出 来 


由 上 表 可 知 ， 用 户 可 以 自 定义 视频 文件 显示 的 大 小 。 例 如 ， 如 果 想 让 视频 以 320X240 像 
素 大 小 显示 ， 就 可 以 加 入 width 和 height 属性 。 具 体格 式 如 下 : 


<video width="320" height="240" controls src="123.mp4" ></video> 


另外 ，<video> 标 记 可 以 通过 source 属性 添加 多 个 视频 文件 ， 具 体格 式 如 下 : 


<video controls="controls"> 
<source src="123.0gg" type="video/ogg"> 


<source src="123.mp4" type="video/mp4"> 
</video> 


6.2.3 视频 解码 器 

视频 解码 器 定义 了 视频 数据 流 编码 和 解码 的 算法 。 其 中 ,编码 器 主要 是 对 数据 流 进行 编码 
操作 ， 用 于 存储 和 传输 ， 解 码 器 主要 是 先 对 视频 文件 进行 解码 ， 然 后 进行 播放 操作 。 

目前 ， 在 HIMLS 中 ， 使 用 比较 多 的 视频 解码 文件 是 Theora、H.264 和 VP8。 
6.2.4 ”<video> 标 记 浏 览 器 的 支持 情况 


不 同 的 浏览 器 对 <video> 标 记 支 持 也 不 同 。 表 6-4 列 出 了 应 用 比较 广泛 的 浏览 器 对 <video> 
标记 的 支持 情况 。 


表 6-4 <video> 标 记 的 浏览 器 支持 情况 


浏览 器 | Firefox 4.0 | IE 9.0 及 | Opera 10.6 | Chrome 6.0 | Safari3.0 及 


视频 格式 及 更 高 版 本 更 高 版 本 及 更 高 版 本 及 更 高 版 本 更 高 版 本 
Ogg 支持 支持 支持 
MPEG 4 支持 支持 支持 


WebM 支持 支持 支持 
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6.3 ”音频 和 视频 中 的 方法 


在 HTMLS5 网 页 中 ， 操 作 音 频 或 视频 文件 的 常用 方法 包括 canPlayType0 方 法 、load0 方 法 、 
play0 方 法 和 pause() 方 法 。 


6.3.1 canPlayType() 方 法 


canPlayType() 方 法 用 于 检测 浏览 器 是 否 能 播放 指定 的 音频 或 视频 类 型 。canPlayType() 方 法 
返回 值 包含 如 下 : 


(1) probably: 浏览 器 全 面 支持 指定 的 音频 或 视频 类 型 。 
(2) maybe: 浏览 器 可 能 支持 指定 的 音频 或 视频 类 型 。 
(3) ""(〈 空 字符 串 ) : 浏览 器 不 支持 指定 的 音频 或 视频 类 型 。 


注意 , 目前 所 有 主流 浏览 器 都 支持 canPlayType() 方 法 。Intemet Explorer 8 及 之 前 的 版 本 不 
支持 该 方法 。 


【 例 6.3】 实例 文件 ，ch06\6.3.html) 
<!DOCTYPE html> 
<html> 
<head> 
<title>canPlayType () 方 法 </title> 
</head> 
<body> 
<p> 浏 览 器 可 以 播放 MP4 视 频 吗 ?<span> 
<button onclick="supportType (event, 'video/mp4','avcl.42E01E, 
mp4a.40.2')" type="button"> 检 查 </button> 
</span></p> 
<p> 浏 览 器 可 以 播放 0GG 音频 吗 ?2<span> 
<button onclick="supportType (event, 'audio/o0gg', 'theora, vorbis')" 
type="button"> 检 查 </button> 
</span></p> 
<script> 
function supportType (e,vidType,codType) 
{ 
myVid=document .createElement ('video'); 
isSupp=myVid.canPlayType (vidType+';codecs="'+codTypet+'"'); 
if (isSupp=="" 
U 
isSupp=" 不 支持 "; 
. 
e.target .parentNode .innerHTML=" 检 查 结果 : " + isSupp; 
上 
</script> 
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</body> 
</html> 


在 正 11.0 中 浏览 效果 如 图 6-5 所 示 。 单 击 【 检 查 】 按钮， 即 可 查看 浏览 器 对 音频 和 视频 的 
支持 情况 ， 如 图 6-6 所 示 。 


可 x sa 口 x 
如 D:\ 本 菠 源 代码 \code 六 图 ~- (| 搜索 | 站 _D: 本 书 滋 代 码 \code 泊 图 ”搜索 
大 canPlayType( 方 法 x | 三 canplayType0 方 法 x 世 
文件 (F) 编辑 (F) 查看 (V) 收藏 夫 (A) 工具 (D) 帮助 (H) 文件 (F) 编辑 (Ej 查看 (V) 收藏 夫 (A) 工具 (T) 帮助 (H) 
评 各 百度 下, 你 WK 于 高 沁 百 度 -下 ,你 咏 和 过 
浏览 器 可 以 播放 MP4 视 频 吗 ? | 检查 浏览 器 可 以 播放 MP4 视 频 吗 ?检查 结果 : probably 
浏览 咒 可 以 措 放 0GG 音频 中? [EB 浏览 器 可 以 播放 0GG 音频 吗 ?检查 结果 : 不 支持 
图 6-5 预览 效果 图 6-6 查看 浏览 器 对 音频 和 视频 的 支持 情况 
6.3.2 load() 方 法 
load() 方 法 用 于 重新 加 载 音频 或 视频 文件 。load() 方 法 的 语法 格式 如 下 : 
audiolvideo.load() 
【 例 64】 (实例 文件 ，ch06\6.4.html) 
<!DOCTYPE html> 
<html> 
<head> 
<title>load() 方 法 </title> 
</head> 
<body> 
<button onclick="changeSource()"” type="button"> 更 改 加 载 视 频 </button> 
3 


<video id="videol" controls="controls" autoplay="autoplay"> 
<source id="mp4 src" src="123.mp4" type="video/mp4"> 
<source id="mp4 src" src="124.mp4" type="video/mp4"> 
您 的 浏览 器 不 支持 HTML5 video 标签 。 

</video> 

<script> 

function changeSource () 
document .getElementById("mp4 src") .src="movie.mp4"7 
document .getElementById("mp4 src") .src="movie.mp4"7 
document .getElementById("videol") .load() 

| 

</script> 

</body> 

</html> 


在 正 11.0 中 浏览 效果 如 图 6-7 所 示 。 单 击 【更 改 加 载 视频 】 按钮, 即 可 重新 加 载 视频 文件 ， 
如 图 6-8 所 示 。 
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图 6-7 预览 效果 图 6-8 重新 加 载 视频 文件 


6.3.3 ”play() 方 法 和 pause() 方 法 
play0 方 法 用 于 开始 播放 音频 或 视频 文件 。pause0 方 法 用 于 暂停 当前 播放 的 音频 或 视频 文件 。 


【 例 6.5】〔 实 例文 件 ，ch06\6.5.html) 


<!DOCTYPE html> 
<html> 
<head> 
<title> play () 方 法 </title> 
</head> 
<body> 
<button onclick="playVid()"” type="button"> 播 放 视 频 </button> 
<button onclick="pauseVid()"” type="button"> 暂 停 视频 </button> 
i 
<video id="videol"> 
<source src="124.mp4" type="video/mp4"> 
您 的 浏览 器 不 支持 HTML5 video 标签 。 
</video> 
<script> 
var myVideo=document .getElementById ("videol1"); 
function PlayVid() 


myVideo.play(); 
} 


function pauseVid () 
myVideo.pause () 7 

</script> 

</body> 

</html> 


{ 


在 正 11.0 中 浏览 效果 如 图 6-9 所 示 。 单 击 【 播 放 视频 】 按 钮 ， 则 视频 开始 播放 ; 单 击 【和 暂 
停 视频 】 按 钮 ， 则 视频 暂停 播放 。 
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图 6-9 预览 效果 


6.4 ”音频 和 视频 中 的 属性 


在 HTMLS5 网 页 中 ， 关 于 音频 和 视频 的 属性 非常 多 ， 本 节 将 挑选 几 个 常用 的 进行 讲解 。 


6.4.1 autoplay 属性 


autoplay 属性 设置 与 返回 音频 或 视频 是 否 在 加 载 后 立即 开始 播放 。 
设置 autoplay 属性 的 语法 格式 如 下 : 


audiolvideo.autoplay=true1false 


返回 autoplay 属性 的 语法 格式 如 下 : 


audiolvideo.autoplay 


其 中 ，autoplay 属性 的 取 值 包括 true 和 false。 


(1) true: 设置 音频 或 视频 在 加 载 后 立即 开始 播放 。 
(2) false: 默认 值 ， 设 置 音频 或 视频 在 加 载 后 不 立即 开始 播放 。 


【 例 6.6】 


(实例 文件 : ch06\6.6.html) 


<!DOCTYPE html> 


<html> 
<head> 
<title> 
</head> 
<body> 
<button 
<button 
<button 


autoplay 属 性 </title> 


onclick="enableAutoplay()" type="button" > 启动 自动 播放 </button> 
onclick="disableAutoplay()" type="button"> 禁 用 自动 播放 </button> 
onclick="checkAutoplay()" type="button"> 检 查 自 动 播放 状态 </button> 
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<br /> 
<video id="videol" controls="controls"> 
<source src="mov bbb.mp4" type="video/mp4"> 
您 的 浏览 器 不 支持 HTML5 video 标 签 。 
</video> 
<seript> 
myVid=document .getElementById ("videol1"); 
function enableAutoplay() 
{ 
myVid.autoplay=true; 
myVid.1load(); 
于 
function disableAutoplay () 
| 
myVid.autoplay=false; 
myVid.1lo0ad(); 
} 
function checkAutoplay() 
{ 
alert (myVid.autoplay); 
); 
</script> 
</body> 
</html> 


在 正 11.0 中 浏览 效果 如 图 6-10 所 示 。 单 击 【 启 动 自动 播放 】 按 钮 ， 然 后 单 击 【 检 查 自动 
播放 状态 】 按 钮 ， 即 可 看 到 此 时 autoplay 属性 为 true。 


司 DA 不 书 要 代码 \code\ 晤 KR 到 \| 国 || 搜索 - 只- 四 
| 导 autoplay 呈 性 3 

文件 (有 ” 泥 加 (E) 查看 V) 收藏 夫 [A) 工具 (T) 帮助 (H) 

育 3 EE 下, 处 I 下 


局 动 自动 播放 ，| 禁用 自动 播放 | 检查 生动 播放 状态 


图 6-10 预览 效果 


6.4.2 buffered 属性 


buffered 属性 返回 TimeRanges 对 象 TimeRanges 对 象 表示 用 户 的 音频 或 视频 缓冲 范围 
缓冲 范围 指 的 是 已 缓冲 音频 或 视频 的 时 间 范 围 。 如 果 用 户 在 音频 或 视频 中 跳跃 播放 ， 就 会 得 到 
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多 个 缓冲 范围 。 
返回 buffered 属性 的 语法 格式 如 下 : 


audiolvideo.buffered 


【 例 6.7】〔 实 例文 件 : ch06\6.7.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> buffered 属性 </title> 

</head> 

<body> 

<button onclick="getFirstBuffRange()"” type="button"> 获 得 视频 的 第 一 段 缓冲 范围 

</button> 

<br /> 

<video id="videol" controls="controls"> 
<source src="mov bbb.mp4" type="video/mp4"> 
您 的 浏览 器 不 支持 HTML5 video 标签 </video> 

<script> 

myVid=document .getElementById("videol"); 

function getFirstBuffRange() 

! 
alert ("开始 : " + myVid.buffered.start (0) + "结束 : " + 

myVid.buffered.end(0)); 

} 

</script> 

</body> 

</html> 


jp 


在 了 11.0 中 浏览 效果 如 图 6-11 所 示 。 视 频 播 放 一 段 后 ， 单 击 【 获 得 视频 的 第 一 段 缓 冲 范 


围 】 按 钮 ， 即 可 看 到 此 时 视频 的 缓冲 范围 。 


导 DA 古人 Rcode\ 汪 Nd 图 ” 口 || 扫 过 内 - © 
局 buffered 后 性 


文 ff(F) 稳重 ( 直 看 (V) 路 写 去 (A) 工 只 (总 人 H) 


图 6-11 预览 效果 
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6.4.3 controls 属性 


controls 属性 设置 或 返回 浏览 器 应 当 显 示 标 准 的 音频 或 视频 控件 。 标 准 的 音频 或 视频 控件 
包括 播放 、 和 暂停 、 进 度 条 、 音 量 、 全 屏 切换 、 字 幕 和 轨道 。 
设置 controls 属性 的 语法 格式 如 下 : 


audiolvideo.controls=truelfalse 


返回 controls 属性 的 语法 格式 如 下 : 


五 


audiolvideo.controls 


其 中 ，controls 属性 的 取 值 包括 true 和 false。 


(1) true: 设置 显示 控件 。 
(2) false: 默认 值 ， 设 置 不 显示 控件 。 


【 例 6.8】 《实例 文件 :ch06\6.8.html) 


<!DOCTYPE html> 
<html> 
<head> 
<title>controls 属性 </title> 
</head> 
<body> 
<button onclick="enableControls()" type="button"> 启 动 控件 </button> 
<button onclick="disableControls () " type="button"> 禁 用 控件 </button> 
<button onclick="checkControls () " type="button"> 检 查 控件 状态 </button><br /> 
<video id="videol"> 
<source src="124.mp4" type="video/mp4"> 
您 的 浏览 器 不 支持 HTML5 video 标签 。</video> 
<script> 
myVid=document .getElementById("videol1"); 
function enableControls () 
myVid.controls=true; 
myVid.1load(); 
function disableControls() 
{ 
myVid.controls=false; 
myVid.load(); 
} 
function checkControls () 
| 
alert (myVid.controls); 
} 
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</script> 
</body> 
</html> 


在 正 11.0 中 浏览 效果 如 图 6-12 所 示 。 单 击 【 启 动 控 件 】 按 钮 ， 然 后 单 击 【 检 查 控件 状态 】 
按钮 ， 即 可 看 到 此 时 controls 属性 为 tue。 


闭 D:\ 本 书 深 代 码 \code\ 尝 代码 图 ” 作 | 地 突 只 - Ey 
| 夸 controls 尾 性 

文件 (F) 名 名 (E] 二 看 (V) 收 训 夫 (A) 工具 (] 本 了 b(H) 

底 百度 -下 , 你 


图 6-12 预览 效果 


6.4.4 currentSrc 属性 


currentSrc 属性 返回 当前 音频 或 视频 的 URL。 如 果 未 设置 音频 或 视频 ， 则 返回 空 字符 串 。 
返回 currentSrc 属性 的 语法 格式 如 下 : 


audiolvideo.currentSsrc 


【 例 6.9】〔 实 例文 件 ，ch06\6.9.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> currentSrc 属 性 </title> 

</head> 

<body> 

<button onclick="getVid()" type="button"> 获 得 当前 视频 的 URL</button><br A 

<video id="videol" controls="controls"> 
<source src="124.mp4" type="video/mp4"> 
您 的 浏览 器 不 支持 HTML5 video 标签 。</video> 

KSEEDt> 

myVid=document .getElementById("videol") > 

function getVid() 
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alert (myVid.currentSsrc); 


} 
</script> 
</body> 
</html> 


在 正 11.0 中 浏览 效果 如 图 6-13 所 示 。 单 击 【 获 得 当前 视频 的 URL)】 按钮 ， 即 可 看 到 当前 
视频 的 URL 路 径 。 


司 “D: 证 书 源 代码 vcode\ 源 代码 vc| 圈 - 搜索 只 - 全 
| 局 currentSrc 必 性 局 

文件 (P 辆 咎 (6 查看 (V) 收藏 夫 (A) 工具 (帮助 (H) 

请 各 百度 -下 ， 作 Bin 利 


作 fileVWDV 本 书 源 人 到 /code/ 源 人 到 /124mp4 


图 6-13 预览 效果 


6.5 ”专家 解 惑 


1. 在 HTML5 网 页 中 添加 所 支持 格式 的 视频 ， 不 能 在 Firefox 8.0 浏览 器 中 正常 播 
放 ， 为什么? 
目前 ，HTML5 的 <video> 标 记 对 视频 的 支持 ， 不 仅仅 有 视频 格式 的 限制 ， 还 有 对 解码 器 的 
限制 。 规 定 如 下 : 
(1) 如 果 视 频 是 Ogg 格式 的 文件 ， 则 需要 带 有 Thedora 视频 编码 和 Vorbis 音频 编码 的 视频 。 
(2) 如 果 视 频 是 MPEG4 格式 的 文件 ， 则 需要 带 有 HH264 视频 编码 和 AAC 音频 编码 的 视频 。 
(3) 如 果 视 频 是 WebM 格式 的 文件 ， 则 需要 带 有 VP8 视频 编码 和 Vorbis 音频 编码 的 视频 。 
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2. 在 HTML5 网 页 中 添加 mp4 格式 的 视频 文件 ,为 什么 在 不 同 的 浏览 器 中 视频 控件 
显示 的 外 观 不 同 ? 

在 HTML5 中 规定 controls 属性 用 于 视频 文件 的 播放 、 和 暂停 、 停 止 和 调节 音量 的 操作 。 因 
为 Controls 是 一 个 布尔 属性 ， 所 以 可 以 赋予 任何 值 。 一 旦 添加 了 此 属性 ， 就 等 于 告诉 浏览 器 需 
要 显示 播放 控件 并 允许 用 户 操作 。 因 为 每 一 个 浏览 器 负责 内 置 视频 控件 的 外 观 不 同 ， 所 以 在 不 
同 的 浏览 器 中 将 显示 不 同 的 视频 控件 外 观 。 
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HTMLS5 呈现 了 很 多 的 新 特性 ， 这 在 之 前 的 HTML 中 是 见 不 到 的 ， 其 中 一 个 最 值得 提 及 的 
特性 就 是 HTML 的 <canvas> 标 记 ， 可 以 对 2D 或 位 图 进行 动态 、 脚 本 的 泻 染 。Canvas 是 一 个 矩 
形 区 域 ， 使 用 JavaScript 可 以 控制 其 每 一 个 像素 。 


7.1 canvas 概述 
Canvas 是 一 个 新 的 HTML 元 素 ， 可 以 被 Script 语言 (通常 是 JavaScript) 用 来 绘制 图 形 。 


7.1.1 添加 canvas 元 素 


<canvas> 标 记 是 一 个 矩形 区 域 ， 包 含 两 个 属性 width 和 height， 分 别 表示 和 矩形 区 域 的 宽度 
和 高 度 。 这 两 个 属性 都 是 可 选 的 ， 并 且 都 可 以 通过 CSS 来 定义 ， 其 默认 值 是 300 像素 和 150 
像素 。 

Canvas 在 网 页 中 常用 的 形式 如 下 : 

<canvas id="myCanvas" width="300" height="200" style="border:lpx solid 
#e3c3c3;2> 


Your browser does not support the canvas element. 
</canvas> 


上 面 示例 代码 中 ，id 表示 画布 对 象 名 称 ，width 和 height 分 别 表示 宽度 和 高 度 。 最 初 的 画 
布 是 不 可 见 的 ， 此 处 为 了 观察 该 矩形 区 域 ， 使 用 了 CSS 样式 ， 即 <style> 标 记 ，Style 表示 画布 
的 样式 。 如 果 浏 览 器 不 支持 画布 标记 ， 就 会 显示 画布 中 间 的 提示 信息 
画布 canvas 本 身 不 具有 绘制 图 形 的 功能 ， 只 是 一 个 容器 。 如 果 读 者 对 于 Java 语言 有 所 了 
解 ， 就 会 发 现 HIMLS 的 画布 和 Java 中 的 Panel 面板 非常 相似 ， 都 可 以 在 容器 绘制 图 形 。 既 然 
canvas 画布 元 素 放 好 了 ， 就 可 以 使 用 脚本 语言 JavaScript 在 网 页 上 绘制 图 形 了 
使 用 canvas 结合 JavaScript 绘制 图 形 ， 一 般 需 要 下 面 几 个 步骤 。 


t@ 册 JavaScript 使 用 id 来 寻找 canvas 元 素 ， 即 获取 当前 画布 对 象 。 
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Var c=document .getElementById ("myCanvas"); 
t@g 创建 context 对 象 。 


Var cxt=c.getContext ("2d") 


getContext 函数 返回 一 个 指定 contextId 的 上 下 文 对 象 ， 如 果 指 定 的 id 不 被 支持 ， 则 返 
null， 当 前 唯一 被 强制 必须 支持 的 是 2D (也许 在 将 来 会 有 3D) 。 注 意 ， 指 定 的 id 对 大 小 写 是 
非常 敏感 的 。 对 象 cxt 建立 之 后 ， 就 可 以 拥有 多 种 绘制 路 径 、 和 矩形 、 贺 形 、 字 符 及 添加 图 像 的 
方法 。 


互 


| 绘 诈 图 形 。 


cxt.fillStyle="#FF0000"; 
cxt.fillRect (0,0,150,75); 


fillStyle 函数 将 其 染 成 红色 。fillRect 函数 规定 了 形状 、 位 置 和 尺寸 ， 这 两 行 代码 绘制 一 个 
红色 的 矩形 。 


7.1.2 ”绘制 矩形 


单独 的 <canvas> 标 记 只 是 在 页 面 中 定义 了 一 个 矩形 区 域 ， 并 无 特别 之 处 ， 开 发 人 员 只 有 配 
合 使 用 JavaScript 脚本 ， 才 能 完成 各 种 图 形 、 线 条 及 复杂 图 形 的 变换 操作 。 与 基于 SVG 来 实现 
同样 绘图 效果 进行 比较 ，canvas 绘图 是 一 种 像素 级 别 的 位 图 绘图 技术 ，SVG 则 是 一 种 矢量 绘 
图 技术 。 

使 用 canvas 和 JavaScript 绘制 一 个 矩形 ， 可 能 会 涉及 一 个 或 多 个 函数 ， 这 些 函 数 如 表 7-1 
所 示 。 


表 7-1 绘制 函数 


绘制 一 个 矩形 ， 该 矩形 区 域 没 有 边框 ， 只 有 填充 色 。 这 个 函数 有 4 个 参数 ， 前 两 个 表 
示 左 上 角 的 坐标 位 置 ， 第 3 个 参数 为 长 度 ， 第 4 个 参数 为 高 度 

strokeRect 绘制 一 个 带 边框 的 矩形 。 该 函数 的 4 个 参数 的 解释 同上 

clearRect 清除 一 个 矩形 区 域 ， 被 清除 的 区 域 没 有 任何 线条 。 该 函数 的 4 个 参数 的 解释 同上 


【 例 7.1】 《实例 文件 : ch07\7.1.html) 
<!DOCTYPE html> 

<html> 

<body> 
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<canvas id="myCanvas" width="300" height="200" style="border:1px solid 
blue">Your browser does not support the canvas element</canvas> 

<script type="text/javascript"> 

Var c=document .getElementById("myCanvas"); 

Var cxt=c.getContext ("2d"); 

cxt.fillSstyle="rgb(0,0,200)"; 

cxt.fillRect (10,20,100,100); 

</script> 

</body> 

</html> 


在 上 面 的 代码 中 ， 首 先 定义 了 一 个 画布 对 象 ， 其 id 名 称 为 myCanvas， 高 度 和 宽度 分 别 为 
200 像素 和 300 像素 ， 并 定义 了 画布 的 边框 显示 样式 。 在 JavaScript 代码 中 ， 首 先 获取 画布 对 
象 ， 然 后 使 用 getContext 获取 当前 2d 的 上 下 文 对 象 ， 并 使 用 fillRect 绘制 一 个 矩形 。 其 中 涉及 
一 个 filStyle 属性 ， 用 于 设置 填充 的 颜色 、 透 明度 等 ， 如 果 设 置 为 “rgb(200.0.0)”， 则 表示 一 
个 颜色 ， 不 透明 ， 如 果 设 为 “rgba(0.0.200.0.3)”， 则 表示 一 个 颜色 ， 透 明度 为 50%。 

在 正 11.0 中 浏览 效果 如 图 7-1 所 示 ， 可 以 看 到 网 页 中 ， 在 一 个 蓝 色 边框 中 显示 了 一 个 蓝 
色 和 矩形 。 


- O x 
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图 7-1 绘制 矩形 


7.2 绘制 基本 形状 


画布 canvas 结合 JavaScript 不 但 可 以 绘制 简单 的 矩形 ， 还 可 以 绘制 一 些 其 他 的 常见 图 形 ， 
如 直线 、 圆 等 。 


7.2.1 绘制 圆 形 


基于 canvas 的 绘图 并 不 是 直接 在 <canvas> 标 记 所 创建 的 绘图 画面 上 进行 各 种 绘图 操作 , 而 
是 依赖 画面 所 提供 的 泻 染 上 下 文 (Rendering Context) ， 所 有 的 绘图 命令 和 属性 都 定义 在 演 染 
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上 下 文中 。 在 通过 canvas id 获取 相应 的 DOM 对 象 之 后 ， 首 先 要 做 的 事情 就 是 获取 泻 染 上 下 文 
对 象 。 演 染 上 下 文 与 canvas 一 一 对 应 ， 无 论 对 同一 canvas 对 象 调用 几 次 getContext0 函 数 ， 都 
将 返回 同一 个 上 下 文 对 象 。 

在 画布 中 绘制 圆 形 ， 可 能 要 涉及 下 面 几 个 函数 ， 如 表 7-2 所 示 。 


表 7-2 绘制 函数 


函数 


功能 


beginPath() 
arc(x,y,radius,startAngle, 
endAngle,anticlockwise) 
closePath() 

fil0 


stroke() 


开始 绘制 路 径 

x 和 y 定义 的 是 圆 的 原点 ，radius 是 圆 的 半径 ，startAngle 和 endAngle 是 弧 
度 ， 不 是 度数 ，anticlockwise 用 来 定义 画 圆 的 方向 ， 值 是 true 或 false 
结束 路 径 的 绘制 

进行 填充 

方法 设置 边框 


路 径 是 绘制 自 定义 图 形 的 好 方法 ,在 canvas 中 通过 beginPath() 函 数 开 始 绘制 路 径 ， 这 个 时 
候 就 可 以 绘制 直线 、 曲 线 等 ， 绘 制 完成 后 调用 fill0 和 stroke0 函 数 完成 填充 和 设置 边框 ， 最 后 
通过 closePath0) 函 数 结束 路 径 的 绘制 。 


【 例 7.2】 实例 文件 :ch07\7.2.html) 


<!DOCTYPE html> 


<html> 
<body> 


<canvas id="myCanvas" width="200" height="200" style="border:lpx solid 


blue"> 


Your browser does not support the canvas element. 


</canvas> 


<script type="text/javascript"> 

var c=document .getElementById ("myCanvas"); 
var cxt=c.getContext ("2d"); 
cxt.fillSstyle="#FFaa00"; 


cxt .beginPath (); 


cxt.arc(70,18,15,0,Math.PI*2,true); 


cxt.closePath(); 


KEE 
/acript> 
</body> 


</html> 


在 上 面 的 JavaScript 代码 中 ， 首 先 使 用 beignPath 函数 开启 一 个 路 径 ， 然 后 绘制 一 个 圆 形 ， 
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最 后 关闭 这 个 路 径 并 填充 。 
在 正 11.0 中 浏览 效果 如 图 7-2 所 示 ， 可 以 看 到 网 页 中 ， 在 矩形 边框 中 显示 了 一 个 黄色 的 
圆 。 


- OO x 
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图 7-2 绘制 椭圆 


7.2.2 ”使 用 moveTo 与 lineTo 绘制 直线 


在 每 个 canvas 实例 对 象 中 都 拥有 一 个 path 对 象 ， 创 建 自 定义 图 形 的 过 程 就 是 不 断 对 path 
对 象 操作 的 过 程 。 每 当 开 始 一 次 新 的 图 形 绘制 任务 ， 都 需要 先 使 用 beginPath() 函 数 来 重 置 path 
对 象 至 初始 状态 ， 进 而 通过 一 系列 对 moveTo/lineTo 等 画 线 函 数 的 调用 ， 绘 制 期 望 的 路 径 。 其 
中 moveTo(x, y) 函 数 设置 绘图 起 始 坐标 ， 而 lineTo(x,y) 等 画 线 函数 可 以 从 当前 起 点 绘制 直线 、 
圆 弧 以 及 曲线 到 目标 位 置 。 最 后 一 步 ， 也 是 可 选 的 步 又， 是 调用 closePath() 函 数 将 自 定义 图 形 
进行 闭合 ， 该 函数 将 自动 创建 一 条 从 当前 坐标 到 起 始 坐标 的 直线 。 

绘制 直线 常用 的 函数 是 moveTo 和 lineTo， 其 含义 如 表 7-3 所 示 。 


表 7-3 绘制 函数 


函数 或 属性 功能 


不 绘制 ， 只 是 将 当前 位 置 移动 到 新 目标 坐标 (xy) ， 并 作为 线条 开始 点 

lineToG 绘制 线条 到 指定 的 目标 坐标 Gcy)， 并 且 在 两 个 坐标 之 问 画 一 条 直线 。 不 管 调用 它们 
哪 一 个 , 都 不 会 真正 画 出 图 形 ， 因 为 还 没有 调用 stroke (绘制 ) 和 il (填充 ) 函数 。 
当前 只 是 在 定义 路 径 的 位 置 ， 以 便 后 面 绘制 时 使 用 

strokeStyle 属性 是 指定 线条 的 颜色 

lineWidth 属性 设置 线条 的 粗细 
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【 例 7.3】〔 实 例文 件 ，ch07\7.3.html) 


<!DOCTYPE html> 

<html> 

<body> 

<canvas id="myCanvas" width="200" height="200" style="border:lpx solid 
blue"> 

Your browser does not support the canvas element. 

</canvas> 

<script type="text/javascript"> 

Var c=document .getElementById("myCanvas"); 

Var cxt=c.getContext ("2d"); 

cxt .beginPath (); 

cxt .strokeStyle="rgb(0,182,0)"; 

cxt.moveTo(10,10); 

cxt.lineTo(150,50); 

cxt.lineTo(10,50); 

cxt.lineWidth=14; 

cxt.stroke(); 

cxt.closePath(); 

</script> 

</body> 

</html> 


上 面 代码 中 ， 使 用 moveTo 函数 定义 一 个 坐标 位 置 为 《10,10) ， 下 面 以 此 坐标 位 置 为 起 点 
绘制 两 条 不 同 的 直线 ， 并 使 用 lineWidth 设置 直线 的 宽度 ， 使 用 strokeStyle 设置 直线 的 颜色 ， 
使 用 lineTo 设置 两 条 不 同 直线 的 结束 位 置 。 

在 下 11.0 中 浏览 效果 如 图 7-3 所 示 ， 可 以 看 到 网 页 中 绘制 了 两 条 直线 ， 这 两 条 直线 在 某 


| 可 ”DA 本 书 源 人 和 vcode 叶 国 ”搜索 万 = 
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文件 (月 ” 声 强 (日 、 杏 者 (V) 恬 感 天 (A] 工具 (T) 帮助 (H) 

请 EE 下 , 全 


二 ~ 


图 7-3 绘制 直线 
7.2.3 使 用 bezierCurveTo 绘制 贝 济 埃 曲 线 
在 数学 的 数值 分 析 领 域 中 ， 贝 济 埃 曲 线 (Bezier 曲线 ) 是 电脑 图 形 学 中 相当 重要 的 参数 曲 
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线 。 更 高 维度 的 广泛 化 贝 济 埃 曲 线 就 称 作 贝 济 埃 曲面 ， 其 中 贝 济 埃 三 角 是 一 种 特殊 的 实例 。 
bezierCurveTo0 表 示 为 一 个 画布 的 当前 子路 径 添 加 一 条 三 次 贝 塞 尔 曲线 。 这 条 曲线 的 开始 
点 是 画布 的 当前 点 , 结束 点 是 (x, y)。 两 条 贝 塞 尔 曲 线 控制 点 (cpX1, cpY1) 和 (cpX2. cpY2) 定 
义 了 曲线 的 形状 。 这 个 方法 返回 时 ， 当 前 位 置 为 (x, y)。 
方法 bezierCurveTo 具体 格式 如 下 : 


bezierCurveTo (cpX1, cpY1l, cpX2, cpY2, x, y) 
其 参数 的 含义 如 表 7-4 所 示 。 
表 7-4 参数 的 含义 
和 曲线 的 开始 点 〈 当 前 位 置 ) 相关 联 的 控制 点 的 坐标 
X, 


和 曲线 的 结束 点 相关 联 的 控制 点 的 坐标 


| xy | 册 线 的 结束 点 的 举 标 


【 例 7.4】〔 实 例文 件 : ch07\7.4.html) 


<!DOCTYPE html> 
<html> 
<head> 
<title> 贝 济 埃 曲 线 </title> 
<script> 
function draw(id) 
{ 
var canvas=document .getElementById(id); 
if(canvas==null) 
return false; 
var Context=canvas .getContext ('2d'); 
context .fillStyle="#eeeeff"; 
context .fillRect (0,0,400,300); ”// 绘 制 一 个 矩形 
var n=0; 
var dx=150; 
var dy=150; 
var s=100; 
context .beginPath(); 
context .globalCompositeOperation="'and'; 
context .fillstyle="'rgb(100,255,100)"'; 
context.strokestyle="'rgb(0,0,100)"'; 
Var x=Math.sin(0); 
var y=Math.cos (0); 
var dig=Math.PI/15*11; 
for (Var i=0;i<30;i++) 


和 
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Var x=Math.sin(i*dig); 
Var y=Math.cos (i*dig); 


context .bezierCurveTo (dx+x*s,dy+y*s-100,dx+x*s+100,dy+ty*s, dx+x*s, dy+y*s 


} 
context.closePath(); 
context .fill (); 
context.stroke (); 
} 
</script> 
</head> 
<body onload="draw('canvas');"> 
<h1> 绘 制 元 素 </h1> 
<canvas id="canvas" width="400" height="300" /> 
</body> 
</html> 


上 面 函 数 draw 代码 中 ， 首 先 使 用 语句 “fillRect(0,0,400,300)” 绘 制 了 一 个 和 矩形， 其 大 小 和 
画布 相同 ， 其 填充 颜色 为 浅 青色 。 下 面 定义 几 个 变量 ， 用 于 设置 曲线 的 坐标 位 置 ， 在 for 循环 
中 使 用 bezierCurveTo 绘制 贝 济 埃 曲线 。 

在 正 11.0 中 浏览 效果 如 图 7-4 所 示 ， 可 以 看 到 网 页 中 显示 了 一 个 贝 济 埃 曲线 。 
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图 7-4 贝 济 埃 曲线 


7.3 ”绘制 渐变 图 形 


渐变 是 两 种 或 更 多 颜色 的 平滑 过 渡 ， 是 指 在 颜色 集 上 使 用 逐步 抽样 算法 ， 并 将 结果 应 用 于 
描 边 样式 和 填充 样式 中 。Canvas 的 绘图 上 下 文 支持 两 种 类 型 的 渐变 : 线性 渐变 和 放射 性 渐变 ， 
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ii 


FP 放射 性 渐变 也 称 为 径 向 渐变 。 


7.3.1 绘制 线性 渐变 


创建 一 个 简单 的 渐变 非常 容易 ， 比 使 用 Photoshop 还 要 快 ， 使 用 渐变 需要 以 下 3 个 步 又。 
L 国 创建 渐变 对 象 。 

var gradient-cxtcreateLinearGradient(0.0.0.canvas height): 

t@g 为 渐变 对 象 设置 颜色 ， 指 明 过 渡 方 式 。 


gradient.addColorStop (0, '#fff"); 
gradient.addColorStop(1, '#000°'); 


03 在 context 上 为 填充 样式 或 描 边 样式 设置 渐变 。 


cCxt.fil1Style=gradient7 


要 设置 显示 颜色 , 在 渐变 对 象 上 使 用 addColorStop 函数 即 可 。 除了 可 以 变换 成 其 他 颜色 外 ， 


还 可 以 为 颜色 设置 alpha 值 (如 透明 ) ， 并 且 alpha 值 也 是 可 以 变化 的 。 为 了 达到 这 样 的 效果 ， 
需要 使 用 颜色 值 的 另 一 种 表示 方法 ， 例 如 内 置 alpha 组 件 的 CSSrgba 函数 。 


绘制 线性 渐变 ， 会 使 用 到 如 表 7-5 所 示 的 几 个 函数 。 
表 7-5 绘制 函数 


addColorStop 函数 允许 指定 两 个 参数 : 颜色 和 偏 移 量 。 颜 色 参 数 是 指 开 发 人 员 希 
望 在 偏 移 位 置 描 边 或 填充 时 所 使 用 的 颜色 。 偏 移 量 是 一 个 0.0~1.0 
之 间 的 数值 ， 代 表 沿 着 渐变 线 渐变 的 距离 有 多 远 


createLinearGradient(x0,y0,x1,x1) | 沿 着 直线 从 (x0,y0) 至 (xl,y1) 绘制 渐变 


【 例 7.5】 “实例 文件 :ch07\7.5.html) 
<!DOCTYPE html> 
<html> 
<head> 
<title> 线 性 渐变 </title> 
</head> 
<body> 
<h1> 绘 制 线性 渐变 </h1> 
<canvas id="canvas" width="400" height="300" style="border:1px solid red"/> 
<script type="text/javascript"> 
Var c=document .getElementById("canvas"); 
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var cxt=c.getContext ("2d"); // 使 用 2D 环 境 对 象 产生 了 一 个 线性 渐变 对 象 
Var gradient=cxt.createLinearGradient (0,0,0,canvas-height) 
gradient.addColorStop(0, '#fff"'); // 设置 渐变 颜色 
gradient.addColorStop (1, '#000'); // 设置 渐变 颜色 
cxt.fillSstyle=gradient; // 将 渐变 填充 到 上 下 文 环境 的 样式 中 
cxt.fillRect (0,0,400,400); 

</script> 

</body> 

</html> 


上 面 的 代码 使 用 2D 环境 对 象 产生 了 一 个 线性 渐变 对 象 ， 渐 变 的 起 始点 是 (0，0) ， 渐 变 
的 结束 点 是 (0，canvas.height) ， 下 面 使 用 addColorStop 函数 设置 渐变 颜色 ， 最 后 将 渐变 填充 
到 上 下 文 环境 的 样式 中 。 
在 下 11.0 中 浏览 效果 如 图 7-5 所 示 ， 可 以 看 到 网 页 中 创建 了 一 个 垂直 方向 上 的 渐变 ， 从 
上 到 下 颜色 逐渐 变 深 。 
| ES "CR 只 ~ 


文件 (F) 机 霹 ( 绰 查看 (V】 收藏 夫 (A) 工具 (帮助 (H) 
育 5 下, OH 


绘制 线性 渐变 


图 7-5 线性 渐变 


7.3.2 ”绘制 径 向 渐变 


除了 线性 渐变 以 外 ，HTML5 Canvas API 还 支持 放射 性 渐变 ， 所 谓 放射 性 渐变 就 是 颜色 会 
介 于 两 个 指定 圆 间 的 锥 形 区 域 平 滑 变化 。 放 射 性 渐变 和 线性 渐变 使 用 的 颜色 终止 点 是 一 样 的 。 
如 果 要 实现 放射 线 渐变 ， 即 径 向 渐变 ， 需 要 使 用 函数 createRadialGradient。 
createRadialGradient(x0,y0.r0,x1,y1.r1) 函 数 表示 沿 着 两 个 圆 之 间 的 锥 面 绘制 渐变 。 其 中 前 3 
个 参数 代表 开始 圆 的 圆心 为 (x0,y0，〉， 半 径 为 0。 最 后 3 个 参数 代表 结束 圆 的 圆心 为 (x1,y1)， 
半径 为 rzl。 


HTJmL5+CSS3+TjQuery MobiletBootstrap 开发 APP 从 入 门 到 精通 〈 视 频 教 学 版 ) 


【 例 7.6】 (实例 文件 :ch07\7.6.html) 


<!DOCTYPE html> 
<html> 
<head> 
<title> 径 向 渐变 </title> 
</head> 
<body> 
<h1> 绘 制 径 向 渐变 </h1> 
<canvas id="canvas" width="400" height="300" style="border:1px solid red"/> 
<script type="text/javascript"> 
Var c=document .getElementById("canvas"); 
Var cxt=c.getContext ("2d"); 
var 
gradient=cxt .createRadialGradient (canvas.width/2,canvas.height/2,0,canvas.w 
idth/2,canvas.height/2,150);  // 创 建 渐变 对 象 gradient 
gradient .addColorStop(0, '#fff');  ”// 添 加 渐变 颜色 
gradient.addColorStop (1, '#000');  ”// 添 加 渐变 颜色 
cxt.fillSstyle=gradient; // 填 充 渐 变 颜色 
cxt.fillRect (0,0,400,400); 
</script> 
</body> 
</html> 


上 面 代码 中 ， 首 先 创建 渐变 对 象 gradient， 此 处 使 用 方法 createRadialGradient 创建 了 一 个 
径 向 渐变 ， 下 面 使 用 addColorStop 添加 颜色 ， 最 后 将 渐变 填充 到 上 下 文 环境 中 。 

在 正 11.0 中 浏览 效果 如 图 7-6 所 示 ， 可 以 看 到 网 页 中 ， 从 圆 的 中 心 亮点 开始 ， 向 外 逐步 
发 散 ， 形 成 了 一 个 径 向 渐变 。 


4 理 套 M 履 可/A) 工具 帮 盈 (HH) 
会 下 ,frat 


绘制 径 向 渐变 


图 7-6 径 向 渐变 
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7.4 绘制 变形 图 形 


画布 canvas 不 但 可 以 使 用 moveTo 这 样 的 方法 来 移动 画笔 , 绘制 图 形 和 线条 ， 还 可 以 使 用 
变换 来 调整 画笔 下 的 画布 。 变 换 的 方法 包括 旋转 、 缩 放 、 变 形 、 平 移 等 。 


7.4.1 变换 原点 坐标 


平移 (translate〉 即 将 绘图 区 相对 于 当前 画布 的 左上 角 进 行 平移 。 如 果 不 进行 变形 ， 则 绘 
图 区 原点 和 画布 原点 是 重 县 的， 绘图 区 相当 于 画图 软件 里 的 热 区 或 当前 层 ， 如 果 进 行 变形 ， 则 
坐标 位 置 会 移动 到 一 个 新 位 置 。 

如 果 要 对 图 形 实 现 平 移 ， 就 需要 使 用 函数 translate (x,y) ， 该 函数 表示 在 平面 上 平移 ， 即 
以 原来 原点 为 参考 ， 然 后 以 偏 移 后 的 位 置 作为 坐标 原点 。 也 就 是 说 ， 原 来 在 〈100.100) ， 然 后 
translate (1,1〉 新 的 坐标 原点 在 (101,101) 而 不 是 (1,1) 。 


【 例 7.7】 《实例 文件 :ch07\7.7html) 


<!DOCTYPE html> 
<html> 
<head> 
<title> 绘 制 坐标 变换 </title> 
<script> 
function draw(id) 
{ 
var canvas=document .getElementById (id); 
if(canvas==null) 
return false; 
Var context=canvas.getContext ('2d'); 
context .fillStyle="#eeeeff"; 
context.fillRect (0,0,400,300); 
context.translate (200,50); 
context .fillStyle='rgba(255,0,0,0.25)"'; 
for (var i=0;i<50;i++){ 
Context .translate (25,25); 
context .fillRect(0,0,100,50): } 
} 
</script> 
</head> 
<body onload="draw('canvas');"> 
<h1> 变 换 原点 坐标 </h1> 
<canvas id="canvas" width="400" height="300" /> 
</body> 
</html> 


在 draw 函数 中 ， 使 用 fillRect 函数 绘制 了 一 个 矩形 ， 然 后 使 用 translate 函数 平移 到 一 个 新 
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位 置 ， 并 从 新 位 置 开 始 ， 使 用 for 循环 连续 移动 多 次 坐标 原点 ， 即 多 次 绘制 矩形 。 
在 下 11.0 中 浏览 效果 如 图 7-7 所 示 , 可 以 看 到 网 页 中 从 坐标 位 置 (200.50) 开始 绘制 矩形 ， 
并 每 次 以 指定 的 平移 距离 绘制 矩形 。 


加 D5 了 人 t 罗 odeW 图 ”| 失 - Pp- 
EP TT * 回 

文件 (F)】 滨 (E)】 埋 看 M) 收 到 天 (A) 工 导 (T) 大 动 (H) 

请 EE 下, tron 


变换 原点 坐标 


图 7-7 变换 坐标 原点 


7.4.2 图形 缩放 


对 于 变形 图 形 来 说 ， 其 中 最 常用 的 方式 就 是 对 图 形 进行 缩放 ， 即 以 原来 图 形 为 参考 ， 放 大 
或 缩小 图 形 ， 从 而 增加 效果 。 

如 果 要 实现 图 形 缩放 ， 就 需要 使 用 scale(x,y) 函 数 ， 该 函数 带 有 两 个 参数 ， 分 别 代表 在 xy 
两 个 方向 上 的 值 。 每 个 参数 在 canvas 显示 图 像 的 时 候 ， 向 其 传递 在 本 方向 轴 上 图 像 要 放大 (或 
缩小 ) 的 量 。 如 果 x 值 为 2， 就 代表 所 绘制 图 像 中 全 部 元 素 都 会 变 成 两 倍 宽 。 如 果 y 值 为 0.5， 
则 绘制 出 来 的 图 像 全 部 元 素 都 会 变 成 之 前 的 一 半 高 。 


【 例 7.8】〔 实 例文 件 : ch07\7.8.html) 
<!DOCTYPE html> 
<html> 
<head> 
<title> 绘 制图 形 缩放 </title> 
<script> 
function draw (id) 
{ 
Var canvas=document .getElementById(id); 
if(canvas==nul1) 
return false; 
Var context=canvas.getContext ('2d'); 
context .fillStyle="#eeeeff"; 
context .fillRect (0,0,400,300); 
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context.translate(200,50); 
context .fillSsStyle="'rgba(255,0,0,0.25)"'; 
for (var i=0;i<50;i++){ 
context .scale(3,0.5) 7 
context.fillRect (0,0,100,50); 
} 
} 
</script> 
</head> 
<body onload="draw('canvas');"> 
<h1> 图 形 缩放 </h1> 
<canvas id="canvas" width="400" height="300" /> 
</body> 
</html> 


上 面 代码 中 ,实现 缩放 操作 是 放 在 for 循环 中 完成 的 。 在 此 循环 中 ， 以 原来 图 形 为 参考 物 ， 
使 其 在 义 轴 方向 增加 为 3 倍 宽 ，y 轴 方 向 上 变 为 原来 的 一 半 。 
在 正 11.0 中 浏览 效果 如 图 7-8 所 示 ， 可 以 看 到 在 一 个 指定 方向 上 绘制 了 多 个 矩形 。 


oO x 
| 避 DVRvodeE 国 避 | 半 未 万 - 
|€ um 3 

广 必 们 和 和 加 下 看 收 天) 工 R(T) WGH) 

六 4 下 ,Gan 


图 形 缩放 


图 7-8 图 形 缩放 


7.4.3 ”旋转 图 形 


变换 操作 并 不 限于 缩放 和 平移 ， 还 可 以 使 用 函数 contextrotate(angle) 来 旋转 图 像 ， 甚 至 可 
以 直接 修改 底层 变换 矩阵 以 完成 一 些 高 级 操作 ， 如 剪裁 图 像 的 绘制 路 径 。 

例如 ，context.rotate(1.57) 表 示 旋 转角 度 参数 以 弧度 为 单位 。rotate() 函 数 默 认 地 从 左上 端的 
(0,0) 开始 旋转 ， 通 过 指定 一 个 角度 ， 改 变 了 画布 坐标 和 Web 浏览 器 中 的 <canvas> 元 素 像 素 
之 间 的 映射 ， 使 得 任意 后 续 绘图 在 画布 中 都 显示 为 旋转 的 ， 它 并 没有 旋转 <canvas> 元 素 本 身 。 
注意 ， 这 个 角度 是 用 弧度 指定 的 。 
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【 例 7.9】〔 实 例文 件 ，ch07\7.9.html) 


<!DOCTYPE html> 
<html> 
<head> 
<title> 绘 制 旋转 图 像 </title> 
<script> 
function draw(id) 
{ 
var canvas=document .getElementById(id); 
if (canvas==null) 
return false; 
Var context=canvas.getContext('2d'); 
context .fillStyle="#eeeeff"; 
context .fillRect (0,0,400,300); 
context.translate(200, 50); 
context .fillstyle='rgba(255,0,0,0.25)"'; 
for (var i=0;i<50;i++){ 
context .rotate (Math.PI/10); 
context.fillRect (0,0,100,50); 
} 
} 
</script> 
</head> 
<body onload="draw('canvas');"> 
<h1> 旋 转 图 形 </h1> 
<canvas id="canvas" width="400" height="300" /> 
</body> 
</html> 


上 面 代码 中 ， 使 用 rotate 函数 在 for 循环 中 对 多 个 图 形 进行 了 旋转 ， 且 旋转 角度 相同 。 
在 下 11.0 中 浏览 效果 如 图 7-9 所 示 ， 可 以 看 到 多 个 矩形 以 中 心 弧度 为 原点 进行 旋转 。 


> 
首 DA 不 书 男 代 码 \codeW 图 ”人 搜索 Pp: 

乱 侍 制 诡 转 图 你 x 

文件 (有 ) 孝 太 (6) 亚 看 (V) 收藏 夫 (A) 工具 (1 玫 乓 (H) 

竟 当下 区 一 下 你 0 下 


旋转 图 形 


图 7-9 旋转 图 形 
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在 前 面 介绍 的 知识 里 面 可 


受制 于 图 形 的 绘制 
不 仅 可 以 在 已 有 图 
些 区 域 。 


其 语法 格式 如 


WD 


下 : 


形 后 面 再 画 


图 形 组 合 


[以 将 一 个 图 形 画 在 另 一 个 之 上 ， 大 多 数 情况 下 是 不 够 的 ， 这 样 会 
顺序 。 不 过 ， 我 们 可 以 利用 globalCompositeOperation 属性 来 改变 这 些 做 法 ， 


新 图 形 ， 还 可 以 月 


globalCompositeOperation = type 


表示 设置 不 同形 状 的 组 合 类 型 ， 其 中 type 表示 方 的 图 形 是 已 经 存在 的 canvas 内 容 ， 圆 


图 形 是 新 的 形状 ， 


其 默认 值 为 source-over， 表 示 在 canvas 内 容 上 面 画 新 的 形状 。 


属性 值 type 的 含义 如 表 7-6 所 示 。 


属性 值 
source-over(default) 
destination-over 
source-in 
destination-in 
source-out 
destination-out 
source-atop 


destination-atop 


表 7-6 属性 值 type 的 含义 


日 来 遮盖 ， 清 除 ( 比 clearRect 函数 方便 得 多 ) 某 


的 


这 是 默认 设置 ， 新 图 形 会 覆盖 在 原 有 内 容 之 上 

会 在 原 有 内 容 之 下 绘制 新 图 形 

新 图 形 会 仅仅 出 现 与 原 有 内 容重 县 的 部 分 ， 其 他 区 域 都 变 成 透明 的 
原 有 内 容 中 与 新 图 形 重 登 的 部 分 会 被 保留 ， 其 他 区 域 都 变 成 透明 的 
结果 是 只 有 新 图 形 中 与 原 有 内 容 不 重 从 的 部 分 会 被 绘制 出 来 

原 有 内 容 中 与 新 图 形 不 重 县 的 部 分 会 被 保留 

新 图 形 中 与 原 有 内 容重 登 的 部 分 会 被 绘制 ， 并 覆盖 于 原 有 内 容 之 上 
原 有 内 容 中 与 新 内 容重 登 的 部 分 会 被 保留 ， 并 在 原 有 内 容 之 下 绘制 新 图 形 


lighter 两 图 形 中 重 双 部 分 作 加 色 处 理 

darker 两 图 形 中 重合 部 分 作 减 色 处 理 

XOT 重 登 的 部 分 会 变 成 透明 

copy 只 有 新 图 形 会 被 保留 ， 其 他 都 被 清除 掉 


【 例 7.10】 实 例文 件 : ch07\7.10.html) 
<!DOCTYPE html> 


<html> 
<head> 


<title> 绘 制图 形 组 合 </title> 


<script> 


function draw(id) 
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var canvas=document .getElementById (id) ; 


if(canvas==null) 

return false; 

Var context=canvas 

Var oprtns=new Arr. 
"source-atop", 
"source-in", 
"source-out", 
"source-over", 
"destination-atop 
"destination-in™" 
"destination-out" 
"destination-over 
"lighter", 


var i=10; 


-getContext ('2d"'); 
ay( 


了 


了 
" 


context .fillSsStyle="blue"; 

context .fillRect (10,10,60,60); 

context .globalCompositeOperation=oprtns[i]; 
context .beginPath (); 

context .fillSstyle="red"; 
context.arc(60,60,30,0,Math.PI*2, false); 


context .fill(); 


} 
</script> 
</head> 


<body onload="draw('canvas');"> 


<h1> 图 形 组 合 </h1> 


<canvas id="canvas" width="400" height="300" /> 


</body> 
</html> 


在 上 面 的 代码 中 ， 首 先 凶 
和 矩形， 并 使 用 content 上 下 文 
式 ， 最 后 使 用 arc 绘制 了 一 个 


建 了 一 个 oprtns 数组 ， 用 于 存储 type 的 12 个 值 ， 然 后 绘制 一 个 
对 象 设置 了 图 形 的 组 合 方式 ， 即 采用 新 图 形 显示 其 他 被 清除 的 方 
圆 。 


在 正 11.0 中 浏览 效果 如 图 7-10 所 示 ， 在 显示 页 面 上 绘制 了 一 个 和 矩形 和 圆 ， 但 矩形 和 圆 接 


触 的 地 方 以 空白 显示 。 
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间 DD:\ 本 书 源 代码 \code 图 ”| 搜索- 
所 综 制 图 形 组 合 x 加 


各 x 


文件 (P 编辑 (E 查看 (V) 收藏 夫 (A) 工具 (D 帮助 (H) 
请 当 百 度 一 下 , 你 新 知道 


~ 
图 形 组 合 


中 


7.6 绘制 带 阴影 的 图 形 


在 画布 canvas 上 绘制 带 有 阴影 效果 的 图 形 非常 简单 , 只 需要 设置 几 个 属性 即 可 。 这 几 个 属 
性 分 别 为 shadowOffsetX、shadowOffsetY、shadowBlur 和 shadowColor， 其 中 属性 shadowColor 
表示 阴影 颜 


图 7-10 图 形 组 合 


色 ， 其 值 和 CSS 颜色 值 一 致 ，shadowBlur 表示 设置 阴影 模糊 程度 ， 此 值 越 大 ， 阴 
影 越 模糊 ，shadowOffsetX 和 shadowOffsetY 属性 表示 阴影 的 x 和 y 偏 移 量 ， 单 位 是 像素 。 


【 例 7.11】 实 例文 件 : ch07\7.11.html) 
<!DOCTYPE html> 


<html> 
<head> 
<title> 绘 制 阴影 效果 图 形 </title> 
</head> 
<body> 


<canvas id="my canvas" width="200" height="200" style="border:1lpx 
solid #ff0000"></canvas> 


<script type="text/javascript"> 
var elem = document .getElementById("my canvas"); 
if (elem && elem.getContext) { 


Var context = elem.getContext ("2d"); 


//shadowOffsetX 和 shadowOffsetY: 阴影 的 x 和 y 偏 移 量 , 单位 是 像素 。 
context.shadowOffsetX = 15; 


context.shadowOffsetY = 15; 
//hadowBlur: 设置 阴影 模糊 程度 。 此 值 越 大 , 阴影 越 模糊 。 其 效果 和 Photoshop 
的 高 斯 模糊 滤 镜 相同 。 


context .shadowBlur 


10; 
//shadowColor: 阴影 颜色 。 其 值 和 css 颜色 值 一 致 。 
//context.shadowColor rqba(Zssr 0n 0 05) 


= 或 下 面 的 十 六 
进 制 的 表示 方法 
context .shadowColor = "#f£00"; 
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context.fillstyle = "#00f"; 
context .fillRect (20, 20, 150, 100); 
} 
</script> 
</body> 
</html> 


在 正 11.0 中 浏览 效果 如 图 7-11 所 示 ， 在 显示 页 面 上 显示 了 一 个 蓝 色 和 矩形 ， 其 阴影 为 红色 
矩形。 


- 0 X 
丫 ”D:\ 本 书 源 代码 \code 话 图 ”搜索 .. 
纯 绘制 阴影 效果 图 形 x | 
文件 (F) 编辑 (E) 查看 (V) 收藏 只 (A) 工具 (T) 帮助 (H) 
请 当 百 度 一 下 ， 你 就 知道 


图 7-11 带 有 阴影 的 图 形 


7.7 ”使 用 图 像 


画布 canvas 有 一 项 功能 就 是 可 以 引入 图 像 , 它 可 以 用 于 图 片 合成 或 制作 背景 等 , 而 目前 仅 
可 以 在 图 像 中 加 入 文字 。 只 要 是 Geck 支持 的 图 像 (如 PNG、GIF、JPEG 等 ) 都 可 以 引入 到 
canvas 中 ， 而 且 其 他 的 canvas 元 素 也 可 以 作为 图 像 的 来 源 。 


7.7.1 绘制 图 像 


要 在 画布 canvas 上 绘制 图 像 , 需要 先 有 一 张 图 片 。 这 张 图 片 可 以 是 已 经 存在 的 <img> 元 素 ， 
或 者 通过 JS 创建 ， 无 论 采用 哪 种 方式 ， 都 需要 在 绘制 canvas 之 前 完全 加 载 这 张 图 片 。 浏 览 
通常 会 在 页 面 脚本 执行 的 同时 异步 加 载 图 片 ， 如 果 试 图 在 图 片 未 完全 加 载 之 前 就 将 其 呈现 到 
canvas 上 ， 那 么 canvas 将 不 会 显示 任何 图 片 。 

捕获 和 绘制 图 形 完全 是 通过 drawImage 函数 完成 的 ， 它 可 以 接受 不 同 的 HTML 参数 ， 具 
体 含义 如 表 7-7 所 示 。 
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表 7-7 drawlmage 函数 


函数 说 明 


drawIamge(image,dx,dy) 接受 一 张 图 片 ， 并 将 其 画 到 canvas 中 。 给 出 的 坐标 (dx,dy) 代表 图 


片 的 左上 角 ， 如 坐标 〈0，0) 将 把 图 片 画 到 canvas 的 左上 角 


drawlamge(image,dx,dy,dw,dh) 接受 一 张 图 片 , 将 其 缩放 为 宽度 dw 和 高 度 dh, 然后 把 它 画 到 canvas 


上 的 (dx,dy) 位 置 


drawIamge(image,sx,sy,sw,sh, 接受 一 张 图 片 ， 通过 参数 (sx,sy,sw,sh) 指定 图 片 裁剪 的 范围 ， 缩 放 
dx,dy,dw,dh) 到 (dw,dh) 的 大 小 ， 最 后 把 它 夯 到 canvas 上 的 (dx,dy) 位 置 


对 象 


【 例 7.12】 实 例文 件 : ch07\7.12.html) 


<!DOCTYPE html> 
<html> 
<head><title> 绘 制图 像 </title></head> 
<body> 
<canvas id="canvas" width="300" height="200" style="border:1px solid blue"> 
Your browser does not support the canvas element. 
</canvas> 
<script type="text/javascript"> 
window.onload=function (){ // 使 用 窗口 的 onload 加 载 事件 
var ctx=document .getElementById("canvas") .getContext ("2d"); // 创 建 上 下 文 


var img=new Image(); // 创 建 Image 对 象 img 
img.src="01.jpg"; // 使 用 img 对 象 的 属性 src 设 置 图 片 来 源 
img.onload=function(){ 
ctx.drawImage (img, 0,0); // 使 用 drawImage 画 出 当前 的 图 像 
上 
</script> 
</body> 
</html> 


在 上 面 代码 中 ,使 用 窗口 的 onload 加 载 事 件 ， 即 页 面 被 加 载 时 执行 函数 。 在 函数 中 创建 上 


下 文 对 象 ctx 并 创建 Image 对 象 img， 然 后 使 用 img 对 象 的 属性 src 设置 图 片 来 源 ， 最 后 使 用 


drawImage 画 出 当前 的 图 像 。 


在 正 11.0 中 浏览 效果 如 图 7-12 所 示 ， 在 显示 页 面 上 绘制 了 一 个 图 像 并 在 画布 中 显示 。 
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四 (a x 
@ 若 D:\ 本 书 源 代码 \code 泊 图 ”搜索 
后 给 制图 像 x 问 
文件 (编辑 (日 ”查看 (/) 收音 夫 (A) 工具 (帮助 (H) 
斌 各 百度 一 下 , 你 就 知道 


图 7-12 绘制 图 像 


7.7.2 图 像 平 铺 


使 用 画布 canvas 绘制 图 像 有 很 多 用 处 ， 其 中 一 个 用 处 就 是 将 绘制 的 图 像 作为 背景 图 片 使 
用 。 在 做 背景 图 片 时 , 如 果 显示 图 片 的 区 域 大 小 不 能 直接 设置 , 通常 将 图 片 以 平 铺 的 方式 显示 。 

HIML5 Canvas API 支持 图 片 平 铺 ， 此 时 需要 调用 createPattern 函数 ， 即 调用 createPattern 
函数 来 替代 之 前 的 drawImage 函数 。 

函数 createPattem 的 语法 格式 如 下 : 


createPattern (image, type) 


其 中 image 表示 要 绘制 的 图 像 ，type 表示 平 铺 的 类 型 。 平 铺 类 型 如 表 7-8 所 示 。 
表 7-8 平 铺 类 型 


参数 值 


repeat-y 纵 方向 平 铺 
repeat 全 方向 平 铺 | 


【 例 7.13】 实 例文 件 ，ch07\7.13.html) 
<!DOCTYPE html> 

<html> 

<head> 
<title> 绘 制图 像 平 铺 </title> 
</head> 

<body onload="draw('canvas');"> 
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<h1> 图 形 平 铺 </h1> 
<canvas id="canvas" width="400" height="300"></canvas> 
<script> 
function draw(id){ 
var canvas=document .getElementById(id); 
if(canvas==null){ 
return false; 
} 
Var context=canvas.getContext ('2d'); 
context .fillStyle="#eeeeff"; 
context .fillRect (0,0,400,300); 
image=new Image(); 
image.src="01.jpg"; 
image.onload=function(){ 
Var ptrn=context.createPattern (image, 'repeat'); 
context .fillSstyle=ptrn; 
context .fillRect (0,0,400,300); 
} 
} 
</script> 
</body> 
</html> 


上 面 代码 中 ,使 用 fillRect 创建 了 一 个 宽度 为 400， 高 度 为 300,， 左上 角 坐 标 位 置 为 (0,，0) 
的 矩形 ， 然 后 创建 了 一 个 Image 对 象 。src 表示 连接 一 个 图 像 源 ， 使 用 createPattem 绘制 一 个 图 
像 ， 其 方式 是 以 完全 平 铺 ， 并 将 这 个 图 像 作为 一 个 模式 填充 到 矩形 中 ， 最 后 绘制 这 个 和 矩形， 此 
和 矩形 大 小 完全 覆盖 原来 的 图 形 。 

在 正 11.0 中 浏览 效果 如 图 7-13 所 示 ， 在 显示 页 面 上 绘制 了 一 个 图 像 ， 其 图 像 以 平 铺 的 方 
式 添 满 整个 矩形 。 


2 [=| x 
钙 _D:\ 直 书 尖 代码 ode 图 已 搜索 
| 总 全 和 国 众 二 淆 “加 
文件 (F) 编 钠 (E) 王者 (V) 收藏 拓 (A) 工具 (D) 午 助 (H) 
请 和 EE 下 ,ces0m 
图 形 平 铺 
i 3 沼 
A 学 
图 7-13 图 像 平 铺 
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7.7.3 ”图 像 裁剪 


在 处 理 图 像 时 经 常会 遇 到 裁剪 这 种 需求 ， 即 在 画布 上 裁剪 出 一 块 区域 ， 该 区 域 是 在 裁剪 动 
作 clip 之 前 ， 由 绘图 路 径 设置 的 ,可 以 是 方形 、 圆 形 、 五 星 形 和 其 他 任何 可 以 绘制 的 轮廓 形状 。 
所 以 ,裁剪 路 径 其 实 就 是 绘图 路 径 ， 只 不 过 这 个 路 径 不 是 拿 来 绘图 的 ， 而 是 设置 显示 区 域 和 遮 
挡 区 域 的 一 个 分 界线 。 

完成 对 图 像 的 裁剪 ， 可 能 要 用 到 clip 函数 。clip 函数 表示 给 canvas 设置 一 个 剪辑 区 域 ， 在 
调用 clip 函数 之 后 的 代码 只 对 这 个 设置 的 剪辑 区 域 有 效 ， 不 会 影响 其 他 地 方 ， 这 个 函数 在 进行 
局 部 更 新 时 很 有 用 。 默 认 情 况 下 ， 剪 辑 区 域 是 一 个 左上 角 在 〈0, 0) ， 宽 和 高 分 别 等 于 canvas 
元 素 的 宽 和 高 的 矩形 。 


【 例 7.14】 实 例文 件 : ch07\7.14.html) 


<!DOCTYPE html> 

< html> 

<head> 
<title> 绘 制图 像 裁 前 </title> 


<script type="text/javascript" src="script.js"></script> 


</head> 

<body onload="draw('canvas');"> 

<h1> 图 像 裁剪 实例 </h1> 

<canvas id="canvas" width="400" height="300"></canvas> 
<script> 


function draw(id){ 
var canvas=document .getElementById (id); 
if(canvas==null){ 
return false; 
} 
Var context=canvas.getContext ('2d'); 
var gr=context.createLinearGradient (0, 400, 300, 0); 
gr.addColorStop(0,'rgb(255,255,0)"'); 
gr-addCcolorstop(1, "rgb(0255r255) ")» 
context .fillStyle=gr; 
context .fillRect (0,0,400,300); 
image=new Image(); 
image.onload=function(){ 
drawImg (context, image); 
}; 
image.src="01.jpg"; 
} 
function drawImg (context, image){ 
create8StarClip (context); 
context .drawImage (image, -50,-150,300,300); 
上 


function create8StarClip (context) 1{ 
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Var n=0; 
Var dx=100; 
Var dy=0; 
Var s=150; 
context .beginPath() 
context .translate(100,150) 
Var x=Math.sin(0); 
Var y=Math.cos (0) 
Var dig=Math.PI/5*4; 
for (var i=0;i<8;i++){ 
Var x=Math.sin(i*dig); 
var y=Math.cos (i*dig); 
context.lineTo (dxt+x*s,dyty*s); 
context .clip(); 
. 
</script> 
</body> 
</html> 


上 面 代码 中 ， 创 建 了 3 个 JavaScript 函数 ， 其 中 create8StarClip 函数 完成 了 多 边 的 图 形 创 
建 ， 其 中 以 此 图 形 作为 裁剪 的 依据 ，drawImg 函数 表示 绘制 一 个 图 形 ， 其 图 形 带 有 裁剪 区 域 ; 
draw 函数 完成 对 画布 对 象 的 获取 ， 并 定义 一 个 线性 渐变 ， 然 后 创建 一 个 Image 对 象 。 

在 正 11.0 中 浏览 效果 如 图 7-14 所 示 ， 在 显示 页 面 上 绘制 一 个 五 边 形 ， 图 像 作为 五 边 形 的 
背景 显示 ， 从 而 实现 对 象 图 像 的 裁剪。 


ER O WR- EE 
| 号 扫 宙 阳 入 折 帮 = 

文件 {F) 篇 后 (日 ， 查 看 (V) 收藏 夫 (A) 工具 (T) 由 (H) 

部 Ea Ge 


图 像 裁剪 实例 


图 7-14 图 像 裁剪 


7.7.4 像素 处 理 


在 电脑 屏幕 上 可 以 看 到 色彩 斑 调 的 图 像 ， 其 实 这 些 图 像 都 是 由 一 个 个 像素 点 组 成 的 。 一 个 
像素 对 应 着 内 存 中 的 一 组 连续 的 二 进 制 位 ， 由 于 是 二 进 制 位 ， 因 此 每 个 位 上 的 取 值 只 能 是 0 或 
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1。 这 样 ， 这 组 连续 的 二 进 制 位 就 可 以 由 0 和 1 排列 组 合 出 很 多 种 情况 ， 而 每 一 种 排列 组 合 就 
决定 了 这 个 像素 的 一 种 颜色 。 通 常 ， 每 个 像素 点 由 4 个 字 节 组 成 。 

这 4 个 字 节 代表 的 含义 分 别 是 ,第 一 个 字 节 决定 像素 的 红色 值 ; 第 二 个 字 节 决定 像素 的 绿 
色 值 ， 第 3 个 字 节 决定 像素 的 蓝 色 值 ， 第 4 个 字 节 决定 像素 的 透明 度 值 。 

在 画布 中 ,可 以 使 用 ImageData 对 象 用 来 保存 图 像 像 素 值 ， 它 有 width、height 和 data 3 个 
属性 ， 其 中 data 属性 就 是 一 个 连续 数组 ， 图 像 的 所 有 像素 值 其 实 是 保存 在 data 里 面 的 。 

data 属性 保存 像素 值 的 方法 如 下 : 


imageData.data[index*4 +0] 
imageData.data[lindex*4 +1] 
imageData.data[index*4 +2] 
imageData.data[index*4 +3] 


上 面 取出 了 data 数组 中 连续 相 邻 的 4 个 值 ， 分 别 代表 了 图 像 中 第 index+1 个 像素 的 红色 、 
绿色 、 蓝 色 和 透明 度 值 的 大 小 。 需 要 注意 的 是 ，index 从 0 开始 ， 图 像 中 总 共有 widthX height 
个 像素 ， 数 组 中 总 共 保存 了 widthXheightX4 个 数值 。 

画布 对 象 有 3 个 函数 用 来 创建 、 读 取 和 设置 InageData 对 象 ， 如 表 7-9 所 示 。 


表 7-9 画布 对 象 函数 


createImageData(width, height) 在 内 存 中 创建 一 个 指定 大 小 的 ImageData 对 象 ( 即 像素 数组 ) ， 对 
象 中 的 像素 点 都 是 黑色 透明 的 ， 即 rgba(0,0,0,0) 


getImageData(x, y, width, heighb | 返回 一 个 ImageData 对 象 ， 这 个 IamgeData 对 象 中 包含 了 指定 区 域 
的 像素 数组 


将 ImageData 对 象 绘制 到 屏幕 的 指定 区 域 上 


【 例 7.15】 实 例文 件 : ch07\7.15.html) 

<!DOCTYPE html> 

<html> 

<head> 

<title> 图 像 像素 处 理 </title> 

<script type="text/javascript" src="script.js"></script> 
</head> 

<body onload="draw('canvas');"> 

<h1> 像 素 处 理 示 例 </h1> 

<canvas id="canvas" width="400" height="300"></canvas> 
<oerEiRt> 


function draw(id){ 
var canvas=document .getElementById(id); 
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if(canvas==nul1) 1{ 
return false; 
} 
Var Context=canvas -getContext ('2d'); 
image=new Image () 7 
image.src="01.jpg"; 
image.onload=function(){ 
context .drawImage (image, 0,0); 
var 
imagedata=context .getImageData (0,0,image.width, image.height); 
for (var i=0,n=imagedata.data.length;i<n;i+=4){ 
imagedata.data[i+0]=255-imagedata.data[i+0]; 
imagedata.data[i+1]=255-imagedata.data[i+2]; 
imagedata.data[i+2]=255-imagedata.data[i+1]; 


F 
context .putImageData (imagedata, 0,0); 
}; 
} 
</script> 
</body> 
</html> 


在 上 面 代码 中 ， 使 用 getImageData 函数 获取 一 个 ImageData 对 象 并 包含 相关 的 像素 数组 ， 
在 for 循环 中 对 像素 值 重 新 赋值 ， 最 后 使 用 putImageData 将 处 理 过 的 图 像 在 画布 上 绘制 出 来 。 

在 正 11.0 中 浏览 效果 如 图 7-15 所 示 ， 在 页 面 上 显示 了 一 个 图 像 ， 其 图 像 明 显 经 过 像素 处 
理 ， 显 示 没 有 原来 清晰 。 


@ 间 ”D:\ 本 书 源 代码 \code 刘 图 ~ 他 搜索- 
千 图 像 像素 处 理 x 加 

文件 (F) ”编辑 (E) 查看 (V) 收藏 夫 (A) 工具 (T) 帮助 (H) 
村 名 百度 一 下 ,你 就 知道 


像素 处 理 示 例 人 


图 7-15 像素 处 理 
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7.8 绘制 文字 


在 画布 中 绘制 字符 串 〈 文 字 ) 的 方式 ， 与 操作 其 他 路 径 对 象 的 方式 相同 ， 可 以 描绘 文本 轮 
廓 和 填充 文本 内 部 ， 同 时 所 有 能 够 应 用 于 其 他 图 形 的 变换 和 样式 都 能 用 于 文本 。 
文本 绘制 功能 由 两 个 函数 组 成 ， 如 表 7-10 所 示 。 


表 7-10 文本 绘制 函数 
函数 说 明 
fillText(text,x,y,maxwidth) 绘制 带 fillstyle 填充 的 文字 、 文本 参数 以 及 用 于 指定 文本 位 置 的 坐标 参 
数 。Maxwidth 是 可 选 参数 ， 用 于 限制 字体 大 小 ， 它 会 将 文本 字体 强制 
收缩 到 指定 尺寸 


绘制 只 有 strokeStyle 边框 的 文字 ， 其 参数 含义 与 上 一 个 方法 相同 


measureText 该 函数 会 返回 一 个 度量 对 象 ， 其 包含 了 在 当前 context 环境 下 指定 文本 
的 实际 显示 宽度 


为 了 保证 文本 在 各 浏览 器 下 都 能 正常 显示 ， 在 绘制 上 下 文 里 有 以 下 字体 属性 。 

font 可 以 是 CSS 字体 规则 中 的 任何 值 ， 包 括 字体 样式 、 字 体 变 种 、 字 体 大 小 与 粗细 、 行 高 
和 字体 名 称 。 

textAlign 控制 文本 的 对 齐 方式 。 它 类 似 于 (但 不 完全 相同 ) CSS 中 的 text-align。 可 能 的 取 
值 为 start、end、left、right、 和 center。 

textBaseline 控制 文本 相对 于 起 点 的 位 置 。 可 能 的 取 值 有 top、hanging、middle、alphabetic、 
ideographic 和 bottom。 对 于 简单 的 英文 字母 ， 可 以 放心 使 用 top、middle 或 bottom 作为 其 文本 


【 例 7.16】 实 例文 件 : ch07\7.7.html) 


<!DOCTYPE html> 
<html> 
<head> 
<title>Canvas</title> 
</head> 
<body> 
<canvas id="my canvas" width="200" height="200" style="border:1px 
solid #ff0000"></canvas> 
<script type="text/javascript"> 
Var elem = document .getElementById("my canvas"); 
if (elem && elem.getContext) { 
Var context = elem.getContext ("2d"); 
context.fillSstyle = "#00f"; 
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//font: 文字 字体 ， 同 CSSfont-family 属性 
context -font = 'italic 30px 微软 雅 黑 '; // 和 斜体 30 像 素 微软 雅 黑 字 
体 
//textAlign: 文字 水 平 对 齐 方式 。 可 取 属 性 值 : start, end, left,right, 
center。 默 认 值 : start. 
context.textAlign = 'left"; 
// 文 字 竖 直 对 齐 方式 。 可 取 属 性 值 : top，hanging，middle,alphabetic， 
ideographic，bottom。 默 认 值 : alphabetic 
Context .textBaseline = 'top'; 
// 要 输出 的 文字 内 容 ， 文 字 位 置 坐标 ， 第 4 个 参数 为 可 选 选项 一 最 大 宽度 。 如 果 需 
要 的 话 ， 则 浏览 器 会 缩减 文字 以 让 它 适应 指定 宽度 
context.fillText (" 祖 国生 日 快乐 !"，0，0,50) ; // 有 填充 
context . font = "bold 30px sans-serif' 7 
context . strokeText ('" 祖 国生 日 快乐 !'，0，50,100) ; // 只 有 文字 边框 
} 
</script> 
</body> 
</html> 


在 正 11.0 中 浏览 效果 如 图 7-16 所 示 ， 在 页 面 上 显示 了 一 个 画布 边框 ， 其 中 有 两 个 不 同 的 
字符 串 : 第 一 个 字符 串 以 斜体 显示 , 其 颜色 为 蓝 色 ; 第 二 个 字符 串 字 体 颜色 为 黑色 , 加 粗 显 示 。 


| 口 x 
@ 他 D\ 本 书 源 代码 \code 泊 图 ~ 人 搜索 .… 
| canas x 区 

文件 (fj 编辑 (5 查看 (V) 收藏 夫 A) 工具 (T) 帮助 (H) 
请 省 百度 一 下 ， 你 味 知 首 


图 7-16 绘制 文字 


7.9 图 形 的 保存 与 恢复 


在 画布 对 象 绘制 图 形 或 图 像 时 ， 可 以 对 这 些 图 形 或 图 形 的 状态 进行 改变 ， 即 永久 保存 图 形 
或 图 像 。 


7.9.1 保存 与 恢复 状态 
在 画布 对 象 中 ， 由 两 个 函数 管理 绘制 状态 的 当前 栈 ，save 函数 把 当前 状态 压 入 栈 中 ， 而 
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restore 从 栈 顶 弹出 状态 。 绘 制 状态 不 会 覆盖 对 画布 所 做 的 每 件 事 情 ， 其 中 save 函数 用 来 保存 
canvas 的 状态 。save 之 后 ， 可 以 调用 Canvas 的 平移 、 放 缩 、 旋 转 、 裁 剪 等 操作 。Restore 函数 
用 来 恢复 Canvas 之 前 保存 的 状态 。save 和 restore 要 配对 使 用 (restore 可 以 比 save 少 ， 但 不 能 
多 ) ， 如 果 restore 调用 次 数 比 save 多 ， 则 会 引发 Error。 


【 例 7.17】 实 例文 件 : ch07\7.17.html) 


<!DOCTYPE html> 

<html> 

<head><title> 保 存 与 恢复 </title></head> 

<body> 

<canvas id="myCanvas" width="500" height="400" style="border:1px solid 
blue"> 

Your browser does not support the canvas element. 

</canvas> 

<script type="text/javascript"> 

Var c=document .getElementById("myCanvas"); 

var ctx=c.getContext ("2d"); 

ctx.fillstyle = "rgb(0,0,255)"; 

ctx.save(); 

ctx.fillRect (50,50,100,100); 

ctx-fillStyle = "rgb{255, 0.0)ns 

ctx.save(); 

ctx.fillRect (200,50,100,100); 

ctx.restore() 

ctx.fillRect (350, 50,100,100); 

ctx.restore(); 

ctx.fillRect (50, 200, 100, 100); 

</script> 

</body> 

</html> 


在 上 面 代码 中 ,绘制 了 4 个 矩形 ， 在 第 一 个 矩形 绘制 之 前 ， 定 义 当 前 矩形 的 显示 颜色 ， 并 
将 此 样式 加 入 到 栈 中 , 然后 创建 了 一 个 矩形 。 第 二 个 矩形 绘制 之 前 , 重新 定义 了 矩形 显示 颜色 ， 
并 使 用 save 将 此 样式 压 入 到 栈 中 ， 然 后 创建 了 一 个 矩形 。 在 第 三 个 矩形 绘制 之 前 ， 使 用 restore 
恢复 当前 显示 颜色 ， 即 调用 栈 中 的 最 上 层 颜 色 ， 绘 制 矩形 。 在 第 4 个 矩形 绘制 之 前 ， 继 续 使 用 
restore 函数 ， 调 用 最 后 一 个 栈 中 元 素 定义 矩形 颜色 。 

在 正 11.0 中 浏览 效果 如 图 7-17 所 示 ， 在 显示 页 面 上 绘制 了 4 个 矩形 ， 第 一 个 和 第 4 个 答 
形 显示 为 蓝 色 ， 第 二 个 和 第 三 个 矩形 显示 为 红色 。 
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图 7-17 恢复 和 保存 


7.9.2 保存 文件 


当 绘 制 出 漂亮 的 图 形 时 需要 保存 这 些 劳 动 成 果 ， 这 时 可 以 将 当前 的 画布 元 素 〈 而 不 是 2D 
环境 ) 的 当前 状态 导出 到 数据 URL。 导 出 很 简单 ， 可 以 利用 toDataURL 函数 完成 ， 它 可 以 以 
不 同 的 图 片 格式 来 调用 。 目 前 png 格式 是 规范 定义 的 格式 ， 通 常 浏览 器 也 支持 其 他 的 格式 。 

目前 Firefox 和 Opera 浏览 器 只 支持 png 格式 ，Safari 支持 gf、png 和 jpg 格式 。 大 多 数 浏 
览 器 支持 读 取 base64 编码 内 容 。URL 的 格式 如 下 : 


data:image/png;base64,iVBORWwOKGgoAAAANSUhEUgAAAfQAAAHOCAYAAADL]1t 


它 先 以 一 个 data 开始 ， 然 后 是 mine 类 型 ， 之 后 是 编码 和 base64， 最 后 是 原始 数据 。 这 些 
原始 数据 就 是 画布 元 素 所 要 导出 的 内 容 ， 并 且 浏览 器 能 够 将 数据 编码 为 真正 的 资源 。 


【 例 7.18】 实 例文 件 : ch07\7.18.html) 


<!DOCTYPE html> 

<html> 

<body> 

<canvas id="myCanvas" width="500" height="500" style="border:lpx solid 
blue"> 

Your browser does not support the canvas element</canvas> 

<script type="text/javascript"> 

Var c=document .getElementById ("myCanvas"); 

Var cxt=c.getContext ("2d"); 

cxt .fillstyle='rgb(0,0,255)"'; 

cxt .fillRect (0,0,cxt.canvas.width, cxt.canvas.height); 

cxt.fillSstyle="rgb(0,255,0)"; 

cxt .fillRect (10,20,50,50); 

window.location=cxt.canvas.toDataURL (image/png'); 

</script> 


HTJmL5+CSS3+TjQuery Jmobile+Bootstrap 开发 APP 从 入 门 到 精通 〈 视 频 教 学 版 ) 


</body> 
</html> 


在 上 面 代码 中 ,使 用 canvas.toDataURL 语句 将 当前 绘制 图 像 保 存 到 URL 数据 中 。 在 Firefox 
62.0 中 浏览 效果 如 图 7-18 所 示 ， 在 显示 页 面 中 无 任何 数据 显示 ， 并 且 提 示 无 法 显示 该 页 面 。 
此 时 需要 注意 的 是 鼠标 指向 的 位 置 ， 即 地 址 栏 中 URL 数据 。 


文件 (F) 编 恒 昌 查看 M) 书签 (8) 工具 (D 带动 (H) 


图 (PNG 图 仿 ,， 500x500 县 示 ) X 肥 s 


O FEET TT 、 … 


图 7-18 保存 图 形 


7.10 综合 实例 1 一 一 绘制 商标 


绘制 商标 是 canvas 画布 的 用 途 之 一 ， 可 以 绘制 adidas 和 nike 商标 。nike 的 图 标 比 adidas 
的 图 标 复杂 得 多 ，adidas 都 是 直线 组 成 ， 而 nike 则 多 了 曲线 。 实 现 本 实例 的 步骤 如 下 : 


[0 出 分 析 需 求 
要 绘制 两 条 曲线 ， 需 要 找到 曲线 的 参考 点 〈 参 考点 决定 了 曲线 的 曲率 ) ， 即 慢 慢 移 动 ， 然 


后 看 效果 ， 反 反复 复 。quadraticCurveTo(30,79.99,78) 函 数 有 两 组 坐标 : 第 一 组 坐标 为 控制 点 ， 
决定 曲线 的 曲率 ， 第 二 组 坐标 为 终点 。 


to 构建 HTML， 实 现 canvas 画布 。 


<!DOCTYPE html> 
<html> 

<head> 
<title> 绘 制 商标 </title> 
</head> 
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<body> 

<canvas id="adidas" width="375px" height="132px" style="border:1lpx solid 
#000;"></canvas> 

</body> 

</html> 


在 下 11.0 中 浏览 效果 如 图 7-19 所 示 ， 此 时 只 显示 一 个 画布 边框 ， 其 内 容 还 没有 绘制 。 


a x 
| 间 DA 本 书 江 代码 \codeWY 图 ” 包 | 搜索 
| 后 给 制 襄 标 * 区 
文件 (F) 编 坊 人 亚 看 (V) 收藏 天 (A) 工具 (T) 型 有 (H) 
去 沁 百 放下 ， 作 Si 下 


图 7-19 定义 画布 边框 


L@ 到 JS 实现 基本 图 形 。 
<script> 
function drawAdidas(){ 
// 取 得 convas 元 素 及 其 绘图 上 下 文 
Var canvas=document .getElementById('adidas'); 
Var context=canvas.getContext ('2d'); 
// 保 存 当 前 绘图 状态 
context .save(); 
// 开 始 绘制 打 勾 的 轮廓 
context .beginPath (); 
context .moveTo(53,0); 
// 绘 制 上 半 部 分 曲线 ， 第 一 组 坐标 为 控制 点 ， 决 定 曲 线 的 曲率 ; 第 二 组 坐标 为 终点 
context .quadraticCurveTo(30,79, 99,78); 
context.lineTo(371,2); 
context.lineTo(74,134); 
context .quadraticCurveTo(-55,124,53,0); 
// 用 红色 填充 
context .fillSstyle="#da251c"; 
context .fill1(); 
// 用 3 像素 深 红线 条 描 边 
context .lineWidth=3; 
// 连 接 处 平滑 
context .lineJoin='round'; 
context .strokeSstyle="#d40000"; 
context .stroke(); 
// 恢 复原 有 绘图 状态 


context .restore(); 
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window.addEventListener ("load",drawAdidas,true); 
</script> 


在 正 11.0 中 浏览 效果 如 图 7-20 所 示 ， 显 示 了 一 个 商标 图 案 ， 颜 色 为 红色 。 


口 x 
多 。Dx 本 书 源 代码 vcode\ 汪 国 ”搜索 
情 绘制 商标 x | 
文件 (F) 编辑 (E) 查看 (V) 收藏 夫 (A) 工具 (T) 帮助 (H) 
请 当 百 度 一 下 ， 你 就 知道 


图 7-20 绘制 商标 


7.11 综合 实例 2 一 一 绘制 火柴 棒 人 物 


漫画 中 比较 常见 的 一 种 图 形 就 是 火柴 棒 人 ,通过 简单 的 几 个 笔画 ， 就 可 以 绘制 一 个 传神 的 
动漫 人 物 。 使 用 canvas 和 JavaScript 同样 可 以 绘制 一 个 火柴 棒 人 物 。 具 体 步 又 如 下 : 


四 由 分 析 需 求 


一 个 火柴 棒 人 ， 由 脸 部 和 身躯 组 成 。 脸 部 是 一 个 圆 形 ， 包 括 眼睛 和 嘴 ， 身 躯 是 几 条 直线 ， 
包括 手 和 腿 等 。 实 际 上 此 案例 就 是 绘制 圆 形 、 弧 度 和 直线 的 组 合 。 


到 实现 HTML 页 面 ， 定 义 画布 canvas 


<!DOCTYPE html> 

<html> 

<title> 绘 制 火 柴 棒 人 </title> 

<body> 

<canvas id="myCanvas" width="500" height="300" style="border:lpx solid 
blue"> 

Your browser does not support the canvas element. 

</canvas> 

</body> 

</html> 


在 正 11.0 中 浏览 效果 如 图 7-21 所 示 ， 页 面 显 示 了 一 个 画布 边框 。 
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图 7-21 定义 画布 边框 
t@Q3j 实现 头 部 轮廓 绘制 


<script type="text/javascript"> 

Var c=document .getElementById ("myCanvas"); 
var cxt=c.getContext ("2d"); 

cxt .beginPath (); 

cxtaarc(100,50;30,0, Math.PI*2, true})> 

让 关 疏 二 下 省 几 人 

</script> 


这 会 产生 一 个 实心 的 、 填 充 的 头 部 ， 即 圆 形 。 在 arc 函数 中 , x 和 y 的 坐标 为 (100，50) ， 
半径 为 30 像素 ， 另 外 两 个 参数 的 弧度 为 弧度 的 开始 和 结束 ， 第 6 个 参数 表示 绘制 弧 形 的 方向 ， 
即 顺 时 针 和 逆 时 针 方向 。 

在 正 11.0 中 浏览 效果 如 图 7-22 所 示 ， 页 面 显 示 了 一 个 实心 圆 ， 其 颜色 为 黑色 。 
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图 7-22 ”绘制 头 部 轮廓 
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04 JS 绘制 笑脸 。 


cxt .beginpPath (); 

cxt .strokeStyle="#c00'; 
cxt.lineWidth=3; 
cxt.arc(100,50,20,0,Math.PI, false); 
cxt.stroke(); 


此 处 使 用 beginPath 方法 ， 表 示 重 新 绘制 ， 并 设置 线条 宽度 ， 然 后 绘制 一 个 弧 形 ， 这 个 弧 
形 是 从 嘴 部 开始 的 。 
在 正 11.0 中 浏览 效果 如 图 7-23 所 示 ， 页 面 上 显示 了 一 个 半圆 式 笑脸 。 


x 
而 CNueersedmineuorDesaop P ~ © | 三 iD 人 x ® 
文件 (月 ”类 蝙 (和 ”可 大 V】 站 要 夫人 工具 Im 大 动 (H) 


图 7-23 绘制 笑脸 
加 JS 绘制 眼睛 。 


cxt .beginPath (); 

cxt .fillStyle="#c00"; 
cxt.arc(90,45,3,0,Math .PI*2,true); 
> | 成 加 中 读 出 国 则 压 7 

cxt .moveTo(113,45); 
cxt.arc(110,45,3,0,Math.PI*2,true); 
ct -FED 

cxt .stroke(); 


首先 填充 弧 线 , 创建 一 个 实体 样式 的 眼睛 , 使 用 arc 绘制 左 眼 , 然后 使 用 moveto 绘制 右 眼 。 
在 正 11.0 中 浏览 效果 如 图 7-24 所 示 ， 页 面 上 显示 了 一 双眼 睛 。 
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图 7-24 绘制 眼睛 
(@Qgj 绘制 身 秽 。 


cxt .moveTo (100, 80); 
cxt.lineTo(100,150); 
cxt .moveTo(100,100), 
cxt.lineTo(60,120); 
cxt .moveTo(100,100); 
cxt.lineTo(140,120); 
cxt .moveTo(100,150); 
cxt.lineTo(80,190); 
cxt .moveTo(100,150); 
cxt.lineTo(140,190); 
cxt.stroke(); 


上 面 代 码 以 moveTo 作为 开始 坐标 ， 以 lineTo 作为 终点 绘制 不 同 的 直线 ， 这 些 直 线 的 坐标 
位 置 需要 在 不 同 地 方 汇集 ,两 只 手 在 坐标 位 置 (100，100) 交叉 ,两 只 脚 在 坐标 位 置 (100,150) 
又。 

在 正 11.0 中 浏览 效果 如 图 7-25 所 示 ， 页 面 显示 了 一 个 火柴 棒 人 。 
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图 7-25 定义 身躯 
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7.12 ”综合 实例 3 一 绘制 时 钟 


利用 容器 画布 canvas 这 个 新 的 特性 , 可 以 在 网 页 上 创建 一 个 类 似 于 钟表 的 特效 。 具体 步 又 
如 下 : 


[0 则 分 析 需 求 。 


在 画布 上 绘制 时 钟 ， 需 要 绘制 几 个 必要 的 图 形 : 表盘 、 时 针 、 分 针 、 秒 针 和 中 心 圆 ， 这 样 将 
这 几 个 图 形 组 合 起 来 就 构成 一 个 时 针 界 面 ， 然 后 使 用 JS 代码 ， 根 据 时 间 定 秒针 、 分 针 和 时 针 。 


02 创建 HTML 页 面 。 


<!DOCTYPE html> 

<html> 

<head> 

<title>canvas 时 钟 </title> 

</head> 

<body> 

<canvas id="canvas" width="200" height="200" style="border:lpx solid 
#000; "> 您 的 浏览 器 不 支持 Canvas。</canvas> 

</body> 

</html> 


上 面 代码 创建 了 一 个 画布 ,其 宽度 为 200 像素 ， 高 度 为 200 像素 , 带 有 边框 , 颜色 为 黑色 ， 
样式 为 直线 型 。 在 下 11.0 中 浏览 效果 如 图 7-26 所 示 ， 可 以 看 到 显示 了 一 个 带 有 黑色 边框 的 画 
布 ， 画 布 中 没有 任何 信息 。 


II | 鲁 DA 不 书 达 f 且 wode\? 国 ”已 | 搜索 Dp- 
[ER x 回 

文 伯 杭 二 (日 查看 M 履 厂 夫 (A) 工具 Mm 大 只 (4) 

部 3 下 , “ms 


图 7-26 定义 画布 
用人 添加 JavaScript， 绘 制 不 同 的 图 形 。 
<script type="text/javascript" language="javascript" charset="utf-8"> 
Var canvas = document .getElementById('canvas'); 


Var ctx = canvas.getContext ('2d"'); 
cer 
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Var timerId; 
Var frameRate = 60; 
function canvObject(){ 
this.x = 0; 
this.y = 0; 
this.rotation = 0 
this.borderWidth 
this.borderColor 
this.fill = false; 

this.fillColor = "#fEf0000'"7 

this.update = function(){ 

if(!this.ctx)throw new Error(' 您 没有 指定 ctx 对 象 。'); 

var ctx = this.ctx 

ctx.save(); 

ctx.lineWidth = this.borderWidth; 

ctx.strokeStyle = this.borderColor; 

ctx.fillSstyle = this.fillColor; 

ctx.translate (this.x, this.y); 


之 名 
"#000000"'; 


外 


if(this.rotation)ctx.rotate (this.rotation * Math.PI/180) 


if(this.draw)this.draw (ctx); 
EEldS EL CERELL() 
ctx.stroke (); 
ctx.restore(); 
} 
}; 
function Line(){}; 
Line.prototype = new canvObject (); 
Line.prototype.fill = false; 
Line.prototype.start = [0,0]; 
Line.prototype.end = [5,5]; 
Line.prototype.draw = function(ctx){ 
ctx.beginPath (); 
ctx.moveTo.apply (ctx, this.start); 
ctx.lineTo.apply (ctx, this.end); 
ctx.closePath(); 
ks 


tunction Cirele(}y{}s 

Circle.prototype = new canvObject (); 
Circle.prototype.draw = function(ctx){ 
ctx.beginPath () > 

ctx.arc(0, 0, this.radius, 0, 2 * Math.PI, true); 
ctx.closePath(); 

hy 


var Circle = new Circle(); 
circle.ctx = ctx; 

circle.x = 100; 

circle.y = 100; 

circle.radius = 90; 
circle.fill = true; 
circle.borderWidth = 6; 
circle tillColor = SfEFEfENS 
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Var hour = new Line(); 
hour.ctx = ctx; 

hour.x = 100; 

hour.y = 100; 
hour.borderColor "#000000"™; 
hour.borderWidth = 10; 
hour.rotation = 0; 

hour.start = [0,20]; 
hour.end = [0,-50]; 


var minute = new Line(); 
minute.ctx = ctx; 
minute.x = 100; 

minute.y = 100; 


minute.borderColor = "#333333"; 
minute.borderWidth = 7; 
minute.rotation = 0; 
minute.start = [0,20]; 


minute.end = [0,-70]; 


Var seconds = new Line(); 
seconds.ctx = ctx; 
seconds.x = 100; 
seconds.y = 100; 
seconds.borderColor 
seconds .borderWidth 
seconds .rotation = 0; 
seconds .start = [0,20]; 
seconds.end = [0,-80]; 


"#f£f£0000"; 
47 


Var center = new Circle() 
center.ctx = ctxs 

center.x = 100; 

center.y = 100; 

center.radius = 5; 

center.fill = true; 
center.borderColor = ' green '; 


for (var i=0,1s=[],cache;i<12;i++){ 
cache = ls[i] = new Line(); 
cache.ctx = ctx; 

cache.x = 100; 

cache.y = 100; 

cache .borderColor = " green "7 
cache .borderWidth = 2; 

Cache .rotation = i * 30; 
cache.start = [0,-70]; 
cache.end = [0,-80]; 

} 


timerId = setInterval (function(){ 


// 清除 画布 


HTML5 绘制 图 形 第 7 各 


ctx.clearRect (0,0,200,200); 
// 填充 背景 色 
ctx.fillstyle = 'green'; 
ctx.fillRect (0,0,200,200); 
// 表盘 
circle.update(); 
// 刻度 
for(var i=0;cache=ls[i++];)cache.update(); 
XA 时 针 

hour.rotation = (new Date()) .getHours() * 30; 
hour.update (); 
Vas 

minute.rotation = (new Date()) .getMinutes() * 6; 
minute.update (); 
7W7 秒针 
seconds.rotation = (new Date()) .getSeconds() * 6; 
seconds.update(); 
// 中 心 贺 
center.update(); 

}, (1000/frameRate) |0); 

}else{ 

alert (' 您 的 浏览 器 不 支持 canvas 无 法 预览 时 钟 ! ') ; 

} 

</script> 


上 面 代 码 由 于 篇 幅 比较 长 ， 只 显示 了 部 分 代码 。 上 面 代码 首先 绘制 不 同类 型 的 图 形 ， 如 时 
针 、 秒 针 、 分 针 等 ， 然 后 将 其 组 合 在 一 起 ， 并 根据 时 间 定 义 时 针 等 指向 。 在 下 11.0 中 浏览 效 
果 如 图 7-27 所 示 ， 可 以 看 到 页 面 中 出 现 了 一 个 时 钟 ， 其 秒针 在 不 停 地 移动 。 

多 CUsers\Administrat 国 ”中 搜索 
大 制作 动态 页 面 时 坤 > 


文人 (有 往生 (E] 租 看 (V】 收 大 夫 /A) 工具 (帮助 H) 
雇 人 EE 下, 930E 


图 7-27 最 终 特效 


7.13 专家 解 惑 


1. 定义 canvas 宽度 和 高 度 时 ， 是 否 可 以 在 CSS 属性 中 定义 呢 ? 
在 添加 一 个 canvas 标记 的 时 候 ， 会 在 canvas 的 属性 里 填写 要 初始 化 的 canvas 的 高 度 和 宽 
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度 : 


<canvas width="500" height="400">Not Supported!</canvas> 


如 果 把 高 度 和 宽度 写 在 css 里 面 ， 结 果 就 会 发 现在 绘图 时 坐标 获取 出 现 差异 ，canvas.width 
和 canvas.height 分 别 是 300 和 150， 和 预期 的 不 一 样 。 这 是 因为 canvas 要 求 这 两 个 属性 必须 和 
canvas 标记 一 起 出 现 。 

2. 画布 中 stroke 和 fill 二 者 的 区 别 是 什么 ? 

HTML5 中 将 图 形 分 为 两 大 类 : 第 一 类 称 作 stroke， 就 是 轮廓 、 勾 勒 或 线条 ， 总 之 图 形 是 
由 线条 组 成 的 ， 第 二 类 称 作 fll， 即 填充 区 域 。 上 下 文 对 象 中 有 两 个 绘制 矩形 的 函数 ， 可 以 让 
我 们 很 好 地 理解 这 两 大 类 图 形 的 区 别 ， 即 strokeRect 和 fillRect。 
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在 HTML5 中 ， 由 于 地 理 定位 、 离 线 Web 应 用 和 Web 存储 技术 的 出 现 ， 用 户 可 以 查找 网 
站 访问 者 的 当前 位 置 。 在 线 时 可 以 快速 地 存储 网 站 的 相关 信息 ， 当 用 户 再 次 访问 网 站 时 ， 将 大 
大 提升 访问 的 速度 ， 即 使 网 站 脱 机 ， 仍 然 可 以 访问 站 点 。 


8.1 获取 地 理 位 置 


在 HIML5 网 页 代码 中 ， 通 过 一 些 有 用 的 API， 可 以 查找 访问 者 当前 的 位 置 。 下 面 将 详细 
讲述 地 理 位 置 获取 的 方法 。 


8.1.1 地 理 地 位 的 原理 
由 于 访问 者 浏览 网 站 的 方式 不 用 ， 可 以 通过 下 列 方式 确定 其 位 置 。 


(1) 如 果 网 站 浏览 者 使 用 电脑 上 网 , 则 通过 获取 浏览 者 的 了 P 地 址 ， 从 而 确定 其 具体 位 置 。 

(2) 如 果 网 站 浏览 者 通过 手机 上 网 ， 则 通过 获取 浏览 者 的 手机 信号 接收 塔 ， 从 而 确定 其 
具体 位 置 。 

(3) 如 果 网 站 浏览 者 的 设备 上 具有 GPS 硬件 ， 则 通过 获取 GPS 发 出 的 载波 信号 ， 从 而 确 
定 其 具体 位 置 。 

(4) 如 果 网 站 浏览 者 通过 无 线 上 网 ， 则 通过 无 线 网 络 连接 获取 其 具体 位 置 。 


API 是 应 用 程序 的 编程 接口 ， 是 一 些 预先 定义 的 函数 ， 目 的 是 提供 应 用 程序 与 开发 
和 人 员 基 于 茶 软 件 或 硬件 以 访问 一 组 例 程 的 能 力 。 
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8.1.2 ”地 理 定位 的 函数 

通过 地 理 定位 可 以 确定 用 户 的 当前 位 置 ， 并 能 获取 用 户 地 理 位 置 的 变化 情况 。 其 中 ， 比 较 
常用 的 就 是 API 中 的 getCurrentpositong 函数 。 

getCurrentpositong 函数 的 语法 格式 如 下 : 


void getCurrentPosition(successCallback, errorCallback, options); 


其 中 successCallback 参数 是 指 在 位 置 成 功 获取 时 用 户 想 要 调用 的 函数 名 称 ; errorCallback 
参数 是 指 在 位 置 获取 失败 时 用 户 想 要 调用 的 函数 名 称 ，options 参数 指出 地 理 定位 时 的 属性 设 


中 


访问 用 户 位 置 是 耗 时 的 操作 ， 同 时 出 于 隐私 问题 ， 还 要 取得 用 户 的 同意 。 
技巧 提示 

如 果 地 理 定位 成 功 , 则 新 的 Position 对 象 将 调用 displayOnMap 函数 , 显示 设备 的 当前 位 置 。 

那么 Positon 对 象 的 含义 是 什么 呢 ? 作为 地 理 定位 的 API，Positon 对 象 包含 位 置 确定 时 的 
时 间 戳 〈timestamp) 和 包含 位 置 的 坐标 (coords) ， 有 具体 语法 格式 如 下 : 

Interface Position 

上 
readonly attribute Coordinates cords; 


readonly attribute DOMTimeStamp timestamp; 
Ds 


8.1.3 ”指定 纬度 和 经 度 坐标 
地 理 定位 成 功 后 ， 将 调用 displayOnMap 函数 。 此 函数 如 下 : 


function displayOnMap (Position) 
var latitude=positon.coords.latitude; 
var longitude=postion.coords.longitude; 


} 


其 中 第 1 行 函数 从 Position 对 象 获取 coordinates 对 象 ， 主 要 由 API 传递 给 程序 调用 ;第 3 
行 和 第 4 行 中 定义 了 两 个 变量 ，latitude 和 longitude 属性 存储 在 定义 的 两 个 变量 中 。 

为 了 在 地 图 上 显示 用 户 的 具体 位 置 ， 可 以 利用 地 图 网 站 的 API。 下 面 以 使 用 百度 地 图 为 例 
进行 讲解 ， 需 要 使 用 Baidu Maps Javascript API。 在 使 用 此 API 前 ， 需 要 在 HIMLS 页 面 中 添加 
一 个 引用 ， 有 具体 代码 如 下 ; 


<--baidu maps API> 
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<script type= “text/javascript” scr= 

“http://api.map.baidu.com/api?key=*&v=1.0&services=true” > 

</script> 

其 中 * 号 代码 注册 到 key。 注册 key 的 方法 为 : 在 “http: //openapi.baidu.com/map/index.html” 
页 中 注册 百度 地 图 API， 然 后 输入 需要 内 置 百度 地 图 页 面 的 URL 地 址 生成 API 密 钥 ， 最 后 
将 key 文件 复制 保存 。 

虽然 已 经 包含 了 Baidu Maps Javascript， 但 是 页 面 中 还 不 能 显示 内 置 的 百度 地 图 ， 还 需要 

添加 html 语言 。 使 地 图 从 程序 转化 为 对 象 需要 加 入 以 下 源 代码 : 


| 


<script 
type="“text/javascript”scr=“http://api.map.baidu.com/api?key=*&v=1.0&service 
s=true”> 

</script> 

<div style="width:600px;height:220px;border:1lpx solid 
gary;margin-top:15px;" id="container"> 

</div> 

<script type="text/javascript"> 

Var map=new BMap.Map ("container"); 

map .centerRAndZoom (new BMap.Point (***,***),17); 

map .addControl (new BMap.NavigationControl ()); 

map.addControl (new BMap.ScaleControl()); 

map.addControl (new BMap.OverviewMapControl ()); 

var local=new BMap.LocalSearch (map, 


enderOptions: {map: map} 

3. 

); 

local.search ("输入 搜索 地 址 "); 


/script> 


上 述 代码 分 析 如 下 : 


(1) 其 中 前 2 行 主要 是 把 baidu map API 程序 植 入 源码 中 。 

(2) 第 3 行 在 页 面 中 设置 一 个 标记 ， 包 括 宽 度 和 长 度 ， 用 户 可 以 自己 调整 ,border=1px 
是 定义 外 框 的 宽度 为 1 个 像素 ，solid 为 实 线 ，gray 为 边框 显示 颜色 ，margin-top 为 该 标记 距离 
与 上 部 的 距离 。 

(3) 第 7 行为 地 图 中 自己 位 置 的 坐标 。 

(4) 第 8~10 行为 植 入 地 图 缩放 控制 工具 。 

(5) 第 11~16 行为 地 图 中 自己 的 位 置 ， 只 需 在 local search 后 填 入 自己 的 位 置 名 称 即 可 。 
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8.1.4 目前 浏览 器 对 地 理 定位 的 支持 情况 
不 同 的 浏览 器 版 本 对 地 理 定 位 技术 的 支持 情况 也 是 不 同 的 。 表 8-1 是 常见 浏览 器 对 地 理 定 
位 的 支持 情况 。 
表 8-1 浏览 器 支持 情况 


浏览 器 名 称 支持 Web 存储 技术 的 版 本 
Intemet Explorer Intemet Explorer 9 及 更 高 版 本 
Firefox Firefox 3.5 及 更 高 版 本 

Opera Opera 10.6 及 更 高 版 本 

Safari Safari 5 及 更 高 版 本 

Chrome Chrome 5 及 更 高 版 本 
Android Android 2.1 及 更 高 版 本 


8.2 HTML5 离线 Web 应 用 


为 了 能 在 离线 的 情况 下 访问 网 站 ， 可 以 采用 HIML5 的 离线 Web 功能 。 下 面 来 学 习 Web 
应 用 程序 如 何 缓存 。 


8.2.1 新 增 的 本 地 缓存 

在 HIML5 中 新 增 了 本 地 缓存 (也 就 是 HTML 离线 Web 应 用 ) ， 主 要 是 通过 应 用 程序 组 
存 整个 离线 网 站 的 HIML、CSS、Javascript、 网 站 图 像 和 资源 。 当 服务 器 没有 和 Internet 建立 
连接 的 时 候 ， 也 可 以 利用 本 地 缓存 中 的 资源 文件 来 正常 运行 Web 应 用 程序 。 

另外 ， 如 果 网 站 发 生 了 变化 ， 则 应 用 程序 缓存 将 重新 加 载 变化 的 数据 文件 。 


8.2.2 ”本 地 缓存 的 管理 者 一 一 manifest 文件 

客户 端的 浏览 器 是 如 何 知 道 应 该 缓存 哪些 文件 的 呢 ? 这 就 需要 依靠 manifest 文件 来 管理 。 
manifest 文件 是 一 个 简单 文本 文件 ， 在 该 文件 中 以 清单 的 形式 列举 了 需要 被 缓存 或 不 需要 被 组 
存 的 资源 文件 的 文件 名 称 ， 以 及 这 些 资源 文件 的 访问 路 径 。 

Manifest 文件 把 指定 的 资源 文件 类 型 分 为 三 类 ， 分 别 是 “CACHE”“NETWORK ”和 
“FALLBACK”。 这 三 类 的 含义 分 别 如 下 : 


(1) CACHE 类 别 : 该 类 别 指定 需要 被 缓存 在 本 地 的 资源 文件 。 这 里 需要 特别 注意 的 是 ， 
在 为 某 个 页 面 指定 需要 本 地 缓存 的 资源 文件 时 , 不 需要 把 这 个 页 面 本 身 指定 在 CACHE 类 型 中 ， 
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因为 如 果 一 个 页 面具 有 manifest 文件 ， 则 浏览 器 会 自动 对 这 个 页 面 进行 本 地 缓存 。 

(2) NETWORK 类 别 : 该 类 别 为 不 进行 本 地 缓存 的 资源 文件 ， 这 些 资源 文件 只 有 当 客 户 
端 与 服务 器 端 建立 连接 的 时 候 才 能 访问 。 

(3) FALLBACK 类 别 : 该 类 别 中 指定 两 个 资源 文件 ， 其 中 一 个 资源 文件 为 能 够 在 线 访 问 
时 使 用 的 资源 文件 ， 另 一 个 资源 文件 为 不 能 在 线 访问 时 使 用 的 备用 资源 文件 。 


以 下 是 一 个 简单 的 manifest 文件 的 内 容 。 


CACHE MANIFEST 

# 文 件 的 开头 必须 是 CACHE MANIFEST 
CACHE: 

123.html 

myphoto.jpg 

12.php 

NETWORK: 
http://www.baidu.com/xxx 
feifei .php 

FALLBACK: 

online.js locale.js 


上 述 代 码 含义 分 析 如 下 : 


(1) 指定 资源 文件 ， 文 件 路 径 可 以 是 相对 路 径 ， 也 可 以 是 绝对 路 径 。 指 定时 每 个 资源 文 
件 为 独立 的 一 行 。 

(2) 第 一 行 必须 是 CACHE MANIFEST， 此 行 的 作用 告诉 浏览 器 需要 对 本 地 缓存 中 的 资 
源 文件 进行 具体 设置 。 

(3) 每 一 个 类 型 都 是 必须 出 现 的 ， 而 且 同 一 个 类 别 可 以 重复 出 现 。 如 果 文 件 开头 没有 指 
定 类 别 而 直接 书写 资源 文件 ， 则 浏览 器 会 把 这 些 资源 文件 视 为 CACHE 类 别 。 

(4) 在 manifest 文件 中 ， 注 释 行 以 “# ”开始 ， 主 要 用 于 进行 一 些 必要 的 说 明 或 解释 。 


为 单个 网 页 添加 manifest 文件 时 ， 需 要 在 Web 应 用 程序 页 面 上 的 html 元 素 的 manifest 属 
性 中 指定 manifest 文件 的 URL 地址 。 具 体 的 代码 如 下 : 


<html manifest="123.manifest"> 
</html> 


添加 上 述 代码 后 ， 浏 览 器 就 能 够 正常 地 阅读 该 文本 文件 。 


| 用 户 可 以 为 每 一 个 页 面 单独 指定 一 个 mainifest 文件 ， 也 可 以 对 整个 Web 应 用 程序 
ET 指定 一 个 总 的 manifest 文 件 。 
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上 述 操作 完成 后 ， 即 可 实现 资源 文件 缓存 到 本 地 。 当 要 对 本 地 缓存 区 的 内 容 进 行 修改 时 ， 
只 需要 修改 manifest 文件 。 文 件 被 修改 后 ， 浏 览 器 可 以 自动 检查 manifest 文件 ， 并 自动 更 新 本 
地 缓存 区 中 的 内 容 。 


8.2.3 浏览 器 网 页 缓存 与 本 地 缓存 的 区 别 
浏览 器 网 页 缓存 与 本 地 缓存 的 主要 区 别 如 下 : 


(1) 因为 浏览 器 网 页 缓存 主要 是 为 了 加 快 网 页 加 载 的 速度 ， 所 以 会 对 每 一 个 打开 的 网 页 
都 进行 缓存 操作 ， 而 本 地 缓存 是 为 整个 Web 应 用 程序 服务 的 ， 只 缓存 那些 指定 缓存 的 网 页 。 

(2) 在 网 络 连接 的 情况 下 ， 浏 览 器 网 页 缓存 一 个 页 面 的 所 有 文件 ， 但 是 一 旦 离线 ， 用 户 
单 击 链接 时 ， 将 会 得 到 一 个 错误 消息 。 而 本 地 缓存 在 离线 时 ， 仍 然 可 以 正常 访问 。 

(3) 对 于 网 页 浏览 者 而 言 ， 浏 览 器 网 页 缓存 了 哪些 内 容 和 资源 ， 这 些 内 容 是 否 安全 可 靠 
等 等 都 不 知道 ， 而 本 地 缓存 的 页 面 是 编程 人 员 指 定 的 内 容 ， 在 安全 方面 相对 可 靠 许多 。 


8.2.4 目前 浏览 器 对 Web 离线 应 用 的 支持 情况 
不 同 的 浏览 器 版 本 对 Web 离线 应 用 技术 的 支持 情况 也 是 不 同 的 。 表 8-2 是 常见 浏览 器 对 
Web 离线 应 用 的 支持 情况 。 


表 8-2 浏览 器 支持 情况 


支持 Web 存储 技术 的 版 本 情况 
Internet Explorer 9 及 更 低 版 本 目前 尚 不 支持 
Firefox 3.5 及 更 高 版 本 
Opera 10.6 及 更 高 版 本 
Safari 4 及 更 高 版 本 
Chrome 5 及 更 高 版 本 

Android 2.0 及 更 高 版 本 


浏览 器 名 称 


Internet Explorer 


Firefox 


Chrome 


Android 


8.3 ”Web 存储 


在 HIML5 标准 之 前 ，Web 存储 信息 需要 Cookies 来 完成 , 但 是 Cookie 不 适合 大 量 数据 的 
存储 ， 因 为 它们 由 每 个 对 服务 器 的 请 求 来 传递 ， 这 使 得 Cookies 速度 很 慢 而 且 效 率 也 不 高 。 为 
此 , 在 THML5 中 ，Web 存储 API 为 用 户 如 何在 计算 机 或 设备 上 存储 用 户 信 息 作 了 数据 标准 的 
定义 。 
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8.3.1 本 地 存储 和 Cookies 的 区 别 
本 地 存储 和 Cookies 扮演 着 类 似 的 角色 ， 但 是 它们 有 根本 的 区 别 。 


(1) 本 地 存储 是 仅 存储 在 用 户 的 硬盘 上 并 等 待 用 户 读 取 ， 而 Cookies 是 在 服务 器 上 读 取 。 

(2) 本 地 存储 仅 供 客户 端 使 用 ， 如 果 需 要 服务 器 端 根据 存储 数值 作出 反映 ， 就 应 该 使 用 
Cookies。 

(3) 读 取 本 地 存储 不 会 影响 到 网 络 带宽 ， 但 是 使 用 Cookies 将 会 发 送 到 服务 器 ， 这 样 会 
影响 到 网 络 带宽 ， 无 形 中 增加 了 成 本 。 

(4) 从 存储 容量 上 看 ， 本 地 存储 可 存储 多 达 SMB 的 数据 ， 而 Cookies 最 多 只 能 存储 4KB 
的 数据 信息 。 


8.3.2 在 客户 端 存 储 数 据 
在 HTMLS5 标准 中 ， 提 供 了 以 下 两 种 在 客户 端 存储 数据 的 新 函数 。 


(1) sessionStorage: 针对 一 个 session 的 数据 存储 ， 也 被 称 为 会 话 存储 。 让 用 户 跟 踪 特 定 
窗口 中 的 数据 ， 即 使 同时 打开 两 个 窗口 是 同一 站 点 ， 每 个 窗口 也 有 自己 独立 的 存储 对 象 ， 但 是 
用 户 会 话 的 持续 时 间 只 是 限定 在 用 户 打 开 浏览 器 窗口 的 时 间 ， 一 旦 关闭 浏览 器 窗口 ， 用 户 会 话 
将 结束 。 

(2) localStorage: 没有 时 间 限 制 的 数据 存储 ， 也 被 称 为 本 地 存储 ， 和 会 话 存储 不 用 ， 本 
地 存储 将 在 用 户 计算 机 上 永久 保持 数据 信息 。 关 闭 浏 览 器 窗口 后 ， 如 果 再 次 打开 该 站 点 ， 就 可 
以 检索 所 有 存储 在 本 地 上 的 数据 。 


在 HIML5 中 ， 数 据 不 是 由 每 个 服务 器 请 求 传递 的 ， 而 是 只 有 在 请 求 时 使 用 数据 ， 这 样 的 
话 ， 存 储 大 量 数据 时 不 会 影响 网 站 性 能 。 对 于 不 同 的 网 站 ， 数 据 存储 于 不 同 的 区 域 ， 并 且 一 个 
网 站 只 能 访问 其 自身 的 数据 。 


HTML5 使 用 JavaScript 来 存储 和 访问 数据 , 建议 用 户 可 以 多 了 解 一 下 JavaScript 的 
| 基本 知识 。 


8.3.3 sessionStorage 函数 


sessionStorage 函数 针对 一 个 session 进行 数据 存储 。 如 果 用 户 关 闭 浏览 器 窗口 ， 则 数据 会 
被 自动 删除 。 
创建 一 个 sessionStorage 函数 的 基本 语法 格式 如 下 : 
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<script type="text/javascript"> 
sessionStorage.abc=" "7 
</script> 


【 例 8.1】〔 实 例文 件 ，ch8\8.1.html) 


<!DOCTYPE HTML> 

<html> 

<body> 

<script type="text/javascript"> 
sessionSstorage.name=" 我 们 的 公司 是 : 英 达 科技 文化 公司 "; 
document .write (sessionStorage.name); 

</script> 

</body> 

</html> 


在 Firefox 62.0 中 浏览 效果 如 图 8-1 所 示 ， 可 以 看 到 sessionStorage 函数 创建 的 对 象 内 容 已 
经 显示 在 网 页 中 。 


文件 (F) 编辑 (6 查看 (V) 


/D;/ 本 书 源 代码 /code/ 源 代码 /ch1 X 


CG @ fileVWD: 本 书 源 代 ; “ 全 | 六 | 三 


我 们 的 公司 是 : 英 达 科 技 文化 公司 


图 8-1 sessionStorage 函数 创建 对 象 的 效果 
下 面 继续 使 用 sessionStorage 函数 来 做 一 个 实例 ， 主 要 制作 记录 用 户 访 问 网 站 次 数 的 计数 器 。 


【 例 8.2】“〔 实 例文 件 ， ch8\8.2.html) 

<!DOCTYPE HTML> 

<html> 

<body> 

<script type="text/javascript"> 

if(sessionStorage .count) 

{ 
sessionStorage .Count=Number (sessionStorage .Count)+17 
} 

else 

{ 

sessionStorage.count=1; 

; 

document .write ("您 访问 该 网 站 的 次 数 为 : "+sessionStorage.count); 
/acript> 
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</body> 
</html> 


在 Firefox 62.0 中 浏览 效果 如 图 8-2 所 示 。 如果 用 户 刷新 一 次 页 面 , 则 计数 器 的 数值 会 进行 加 1。 


工具 (D 帮助 (H)_ 


文件 (F) 编辑 (E] 查看 (V) 历史 (5) 


书签 (B) 


/D:/ 本 书 源 代码 /code/ 源 代码 /ch X 加 


个 @ fileVWD:/ 本 书 源 人 


您 访问 该 网 站 的 次 数 为 : 5 


图 8-2 ”sessionStorage 方法 创建 计数 器 效果 


如 果 用 户 关闭 浏览 器 窗口 ， 再 次 打开 该 网 页 ， 则 计数 器 将 重 置 为 1 。 
枝 巧 提示 


8.3.4 localStorage 函数 


与 seessionStorage 函数 不 同 , localStorage 函数 存储 的 数据 没有 时 间 限 制 。 也 就 是 说 网 页 浏 
览 者 关闭 网 页 很 长 一 段 时 间 后 ， 再 次 打开 此 网 页 时 ， 数 据 依然 可 用 。 
创建 一 个 localStorage 函数 的 基本 语法 格式 如 下 : 


<script type="text/javascript"> 
localStorage .abc=" "; 
</script> 


【 例 8.3】 《实例 文件 :ch8\8.3.html) 
<!DOCTYPE HTML> 
<html> 
<body> 
<script type="text/javascript"> 
localStorage .name=" 学 习 HTML5 最 新 的 技术 : Web 存 储 "; 
document .write (JocalStorage .name) 7 
</script> 
</body> 
</html> 


在 Firefox 62.0 中 浏览 效果 如 图 8-3 所 示 ， 可 以 看 到 localStorage 函数 创建 的 对 象 内 容 显 示 
在 网 页 中 。 


HTJmL5+CSS3+TjQuery MobiletBootstrap 开发 APP 从 入 门 到 精通 〈 视 频 教 学 版 ) 


€| GO @ fileVWDy 本 书 源 ftE 宫 | 为 | 三 


学 习 HTML5 最 新 的 技术 : Web 存 储 


图 8-3 ”localStorage 函数 创建 对 象 的 效果 


下 面 仍然 使 用 localStorage 函数 来 制作 记录 用 户 访问 网 站 次 数 的 计数 器 。 用 户 可 以 清楚 地 
看 到 localStorage 函数 和 sessionStorage 函数 的 区 别 。 


【 例 8.4】“《 实 例文 件 :， ch8\8.4.html) 


<!DOCTYPE HTML> 


<html> 
<body> 


<script type="text/javascript"> 
if (localStorage .count) 


localStorage.count=Number (localStorage.count)+1; 


} 


else 


{ 


localStorage.count=1; 


} 


document .write ("您 访问 该 网 站 的 次 数 为 : "+localStorage.count"); 


</script> 
</body> 
</html> 


在 正 11.0 中 浏览 效果 如 图 8-4 所 示 。 如果 用 户 刷 新 一 次 页 面 , 则 计数 器 的 数值 将 进行 加 1; 


如 果 用 户 关 闭 浏览 器 窗 


， 再 次 打开 该 网 页 ， 则 计数 器 会 继续 上 一 次 计数 ， 而 不 会 重 置 为 1。 


万 ] Gxchl9\194.htm| PD- OX 
文件 (月 ”编辑 (E) ”查看 (V) ”收藏 夫 (A) ”工具 (T) ”帮助 (H) 


您 访问 该 网 站 的 次 数 为 ，1 


图 8-4 ”localStorage 函数 创建 计数 器 效果 
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8.3.5 ”目前 浏览 器 对 Web 存储 的 支持 情况 
不 同 的 浏览 器 版 本 对 Web 存储 技术 的 支持 情况 也 是 不 同 的 。 表 8-3 是 常见 浏览 器 对 Web 
存储 的 支持 情况 。 
表 8-3 ”浏览 器 支持 情况 


浏览 器 名 称 支持 Web 存储 技术 的 版 本 
Internet Explorer Internet Explorer 8 及 更 高 版 本 
Firefox Firefox 3.6 及 更 高 版 本 
Opera Opera 10.0 及 更 高 版 本 
Safari Safari 4 及 更 高 版 本 
Chrome Chrome 5 及 更 高 版 本 
Android Android 2.1 及 更 高 版 本 
8.4 专家 解 惑 


1. 不 同 的 浏览 器 可 以 读 取 同 一 个 Web 中 存储 的 数据 吗 ? 

在 Web 存储 时 ， 不 同 的 浏览 器 将 存储 在 不 同 的 Web 存储 库 中 。 例 如 ， 如 果 用 户 使 用 的 是 
正 浏览 器 ， 那 么 Web 存储 工作 时 ， 所 有 数据 将 存储 在 正 的 Web 存储 库 中 ;如果 用 户 再 次 使 
用 火狐 浏览 器 访问 该 站 点 ， 就 不 能 读 取 正 浏览 器 存储 的 数据 ， 可 见 每 个 浏览 器 的 存储 是 分 开 
并 独立 工作 的 。 

2. 离线 存储 站 点 时 是 否 需要 浏览 者 同意 ? 

和 地 理 定位 类 似 ， 在 网 站 使 用 manifest 文件 时 ， 浏 览 器 会 提供 一 个 权限 提示 ， 提 示 用 户 是 
否 将 离线 设 为 可 用 ， 但 是 不 是 每 一 个 浏览 器 都 支持 这 样 的 操作 。 


第 9 章 CSS3 快 速 入 门 


一 个 美观 大 方 简约 的 页 面 以 及 高 访问 量 的 网 站 ， 是 网 页 设计 者 的 追求 。 然 而 ， 仅 通过 
HTML5 实现 是 非常 困难 的 ，HTML 语言 仅仅 定义 了 网 页 结构 ， 对 于 文本 样式 而 没有 过 多 涉及 。 
这 就 需要 一 种 技术 对 页 面 布局 、 字 体 、 颜 色 、 背 景 和 其 他 图 文 效果 的 实现 提供 更 加 精确 地 控制 ， 
这 种 技术 就 是 CSS 。 


9.1 CSS3 介绍 


CSS3 最 大 的 优势 是 在 后 期 维护 中 ， 如 果 一 些 外 观 样式 需要 修改 ， 就 只 修改 相应 的 代码 即 
可 。 


9.1.1 CSS3 功能 


随 着 Internet 不 断 地 发 展 ， 对 页 面 效 果 诉 求 越 来 越 强 烈 ， 只 依赖 HTML 这 种 结构 化 标记 来 
实现 样式 已 经 不 能 满足 网 页 设计 者 的 需要 ， 其 表现 在 以 下 几 个 方面 。 


(1) 维护 困难 。 为 了 修改 某 个 特殊 标记 格式 ， 需 要 花费 很 多 时 间 ， 尤 其 对 整个 网 站 而 言 ， 
后 期 修改 和 维护 成 本 较 高 。 

(2) 标记 不 足 。HIML 本 身 标记 并 不 是 很 多 ， 而 且 很 多 标记 都 是 为 网 页 内 容 服 务 的 ， 关 
于 内 容 样式 的 标记 (如 文字 间距 、 段 落 缩 进 ) 很 难 在 HIML 中 找到 。 

(3) 网 页 过 于 腾 肿 。 由 于 没有 统一 对 各 种 风格 样式 进行 控制 ，HIML 页 面 往往 体积 过 大 ， 
占用 掉 很 多 宝贵 的 宽度 。 

(4) 定位 困难 。 在 整体 布局 页 面 时 ，HTML 对 于 各 个 模块 的 位 置 调整 显得 捉襟见肘 ， 过 
多 的 <table> 标 记 将 会 导致 页 面 的 复杂 和 后 期 维护 的 困难 。 


在 这 种 情况 下 ， 就 需要 寻找 一 种 可 以 将 结构 化 标记 与 丰富 页 面 表现 相 结合 的 技术 ， 而 CSS 
样式 技术 恰恰 迎合 了 这 种 需要 。 
CSS (Cascading Style Sheet) 称 为 层 倒 样式 表 ， 也 可 以 称 为 CSS 样式 表 或 样式 表 ， 其 文件 
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扩展 名 为 .css。CSS 是 用 于 增强 或 控制 网 页 样式 ， 并 允许 将 样式 信息 与 网 页 内 容 分 离 的 一 种 标 
记性 语言 。 

引用 样式 表 的 目的 是 将 “网 页 结构 代码 ”和 “网 页 样式 风格 代码 ”分 离开 ， 从 而 使 网 页 设 
计 者 可 以 对 网 页 布局 进行 更 多 的 控制 。 利 用 样式 表 可 以 将 整个 站 点 上 所 有 网 页 都 指向 某 个 CSS 
文件 ， 设 计 者 只 需要 修改 CSS 文件 中 的 某 一 行 ， 整 个 网 页 上 对 应 的 样式 就 会 随 之 发 生 改 变 。 


9.1.2 CSS3 发 展 历 史 


万 维 网 联盟 (W3C) 在 1996 年 制定 并 发 布 了 一 个 网 页 排版 样式 标准 ( 层 革 样式 表 〉 用 来 
对 HTML 有 限 的 表现 功能 进行 补充 。 

随 着 CSS 的 广泛 应 用 ，CSS 技术 越 来 越 成 熟 。CSS 现在 有 三 个 不 同 层次 的 标准 : CSS1、 
CSS2 和 CSS3 。 

CSS1 (CSS Level 1) 是 CSS 的 第 一 层次 标准 ， 它 正式 发 布 于 1996 年 12 月 17 日 ， 后 来 于 
1999 年 1 月 11 日 进行 了 修改 。 该 标准 提供 简单 的 样式 表 机 制 ， 使 网 页 的 设计 者 可 以 通过 附属 
样式 对 HTML 文档 的 表现 进行 描述 。 

CSS2 (CSS Level 2) 于 1998 年 5 月 12 日 被 正式 作为 标准 发 布 。CSS2 标准 是 基于 CSS1 
设计 的 ， 其 包含 了 CSS1 所 有 的 功能 ， 并 扩充 和 改进 了 很 多 更 加 强大 的 属性 。CSS2 支持 多 媒体 
样式 表 ， 使 得 设计 者 可 以 根据 不 同 的 输出 设备 给 文档 制定 不 同 的 表现 形式 。 

在 2001 年 5 月 23 日 , W3C 完成 了 CSS3 的 工作 草案 。 该 草案 制订 了 CSS3 的 发 展 路 线 图 ， 
详细 列 出 了 所 有 模块 ， 并 计划 在 未 来 进行 逐步 规范 。 

CSS 1 主要 定义 了 网 页 的 基本 属性 ， 如 字体 、 颜 色 、 空 白 边 等 。CSS 2 在 此 基础 上 添加 了 
一 些 高 级 功能 〈 如 浮动 和 定位 ) ， 以 及 一 些 高 级 的 选择 器 〈 如 子 选择 器 、 相 邻 选择 器 和 通用 选 
择 器 等 ) 。CSS3 开始 遵循 模块 化 开发 ， 标 准 被 分 为 若干 个 相互 独立 的 模块 ， 这 将 有 助 于 理 清 
模块 化 规范 之 间 的 关系 ， 减 小 完整 文件 的 体积 。 


9.1.3 浏览 器 与 CSS3 


CSS3 制定 完成 之 后 具有 了 很 多 新 功能 〈 新 样式 ) ， 但 这 些 新 样式 在 浏览 器 中 不 能 获得 完 
全 支持 。 主 要 在 于 各 个 浏览 器 对 CSS3 很 多 细节 处 理 上 存在 差异 ， 例 如 某 个 标记 属性 一 种 浏览 
器 支持 而 另 一 种 浏览 器 不 支持 ， 或 者 两 者 浏览 器 都 支持 但 其 显示 效果 不 一 样 。 

主流 浏览 器 为 了 自己 产品 利益 和 推广 ， 定 义 了 很 多 私有 属性 用 于 加 强 页 面 显示 样式 和 效 
果 ， 导 致 现在 每 个 浏览 器 都 存在 大 量 的 私有 属性 。 虽 然 使 用 私有 属性 可 以 快速 构建 效果 ,但 是 
对 网 页 设计 者 是 一 个 大 麻烦 。 设 计 一 个 页 面 ， 就 需要 考虑 在 不 同 浏览 器 上 的 显示 效果 ， 一 个 不 
注意 就 会 导致 同一 个 页 面 在 不 同 浏览 器 上 显示 效果 不 一 致 。 甚 至 有 的 浏览 器 不 同 版 本 之 间 ， 也 
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具有 不 同 的 属性 。 

如 果 所 有 浏览 器 都 支持 CSS3 样式 ， 那 么 网 页 设计 者 只 需 使 用 一 种 统一 标记 ， 即 可 在 不 同 
浏览 器 上 实现 一 致 的 显示 效果 。 

当 CSS3 被 所 有 浏览 器 接受 和 支持 以 后 ， 整 个 网 页 设计 将 会 变 得 非常 容易 。CSS3 标准 使 
得 布局 更 加 合理 ， 样 式 更 加 美观 ， 整 个 Web 页 面 显示 将 会 焕然 一 新 。 虽 然 现 在 CSS3 还 没有 完 
全 普及 ， 各 个 浏览 器 对 CSS3 的 支持 还 处 于 发 展 阶段 ， 但 CSS3 具有 很 高 的 发 展 潜力 ， 在 样式 
修饰 方面 是 其 他 技术 无 法 替代 的 。 此 时 学 习 CSS3 技术 ， 才 能 保证 技术 不 落伍 。 


9.2 编辑 和 浏览 CSS 


CSS 文件 是 文本 格式 文件 ， 因 此 在 编辑 CSS 时 就 有 了 多 种 选择 ， 可 以 使 用 一 些 简单 的 文 
本 编辑 工具 〈 如 记事 本 、Word) ， 也 可 以 选择 专业 的 CSS 编辑 工具 (如 Dreamweaver) 。 记 
事 本 编辑 工具 适合 于 初学 者 ， 不 适合 大 项 目 编辑 ， 但 专业 工具 软件 通常 占用 空间 较 大 ， 打 开 不 
太 方便 。 


9.2.1 CSS 基础 语法 


在 前 面 介 绍 过 ，CSS 样式 表 由 若干 条 样式 规则 组 成 ， 这 些 样 式 规则 可 以 应 用 到 不 同 的 元 素 
或 文档 中 来 定义 它们 的 显示 效果 。 每 一 条 样式 规则 由 三 部 分 构成 : 选择 符 〈selector) 、 属 性 
(property) 和 属性 值 (value) 。 其 基本 格式 如 下 : 


selector{property: value} 


(1) selector 可 以 采用 多 种 形式 ， 可 以 为 文档 中 的 HTML 标记 (如 <body>、<table>、<p> 
等 ) ， 也 可 以 是 XML 文档 中 的 标记 。 

(2) property 是 选择 符 指 定 的 标记 所 包含 的 属性 。 

(3) value 指定 了 属性 的 值 。 如 果 定 义 选择 符 的 多 个 属性 ， 则 属性 和 属性 值 为 一 组 ， 组 与 
组 之 间 用 “:” 隔 开 。 基 本 格式 如 下 : 


selector{propertyl: valuel; property2: Value27.… ji 


下 面 就 给 出 一 条 样式 规则 ， 代 码 如 下 : 


p{color:red} 


该 样式 规则 的 构成 为 : p 为 段落 提供 样式 ，color 指定 文字 颜色 属性 ，red 为 属性 值 。 此 样 
式 规 则 表示 标记 <p> 指 定 的 段落 文字 为 红色 。 
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如 果 要 为 段落 设置 多 种 样式 ， 则 可 以 使 用 下 列 语句 。 


ptfont-family:" 隶 书 "; color:red; font-size:40px; font-weight:bold} 


9.2.2 ”使 用 记事 本 手工 编写 CSS 文件 
由 于 CSS 是 文本 格式 ， 因 此 使 用 传统 的 文本 编辑 器 就 可 以 编辑 CSS。 当 然 这 些 编辑 软件 
不 支持 语法 提示 ， 不 支持 验证 , 会 严重 影响 开发 效率 , 但 使 用 记事 本 手工 编写 CSS 文件 可 以 使 


初学 者 更 快 地 掌握 CSS3 技术 。 
使 用 记事 本 编写 CSS 和 使 用 记事 本 编写 HTML 的 方法 一 样 。 首 先 需 要 打开 一 个 记事 本 ， 


然后 在 里 面 输入 相应 CSS 代码 即 可 。 


【 例 9.1】 使 用 记事 本 手工 编写 CSS 文件 。 
上 @ 出 打开 记事 本 ， 编 写 HTML 文档 。 


打开 一 个 记事 本 ， 输 入 HTML 代码 ， 如 图 9-1 所 示 。 
{@ 量 添加 CSS 代码 ， 修 饰 HIML 元 素 。 


在 head 部 分 添加 CSS 样式 代码 ， 效 果 如 图 9-2 所 示 。 
半 61.html -记事 本 - oO x oo x 


文件 (F) 编辑 (E) 格式 (Oj 查看 (V) 帮 ! 
0 着 ”D:\ 本 书 源 代码 \code 衣 图 ”搜索 .…. 


hin? 后 记事 本 开发 CSS x 
ee 文件 (F) 编辑 (6 查看 (V) 收藏 只 (A) 工具 (T) 帮助 (H) 
body> -一 

p> 这 是 一 个 段落 ， 使 用 Css 修饰 </p> 请 汪 百 度 一下 ,你 六 知道 

K/body> 


这 是 一 个 段落 ， 使 用 CSS 修 饰 


图 9-1 记事 本 开发 HTML 图 9-2 添加 样式 后 效果 


从 窗口 中 可 以 看 出 ， 在 head 部 分 添加 了 一 个 <style> 标 记 〈 即 CSS 样式 标记 ) 。 在 <style> 
标记 中 间 对 p 样式 进行 了 设置 ， 设 置 段落 居中 显示 并 且 颜 色 为 红色 。 


[0 运行 网 页 文件 。 


编辑 完成 后 ， 使 用 IE 11.0 打开 (如 图 9-3 所 示 ) ， 可 以 看 到 段落 在 页 面 中 间 以 红色 字 


体 显示 。 


引 | 
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= 日 Xx 
名 。D:\ 本 书 源 代 码 code\ 六 国 ~ 中 搜索- 

司 记事 本 开发 CSS x | 

文件 (F) 编辑 (E) 查看 (V) 收藏 夫 (A) 工具 (T) 帮助 (H) 

再 当 百 度 一 下 ,你 就 知道 


这 是 一 个 段落 ， 使 用 CSS 修 饰 


图 9-3 CSS 样式 显示 窗口 


9.2.3 使 用 Dreamweaver CC 创建 CSS 文件 


随 着 Web 技术 的 发 展 ， 越 来 越 多 的 开发 人 员 开 始 使 用 功能 更 多 、 界 面 更 友好 的 专业 CSS 
编辑 器 (如 Dreamweaver CC 的 CSS 编辑 器 和 Visual Studio 的 CSS 编辑 器 ) ， 这 些 编辑 器 有 语 
法 着 色 ， 并 带 有 输入 提示 ， 甚 至 有 自动 创建 CSS 的 功能 。 


【 例 9.2】 使 用 Dreamweaver CC 创建 CSS 文件 。 
La 国 创建 HTML 文档 。 


使 用 Dreamweaver CC 创建 HTML 文档 的 方法 前 面 已 经 介绍 过 , 这 里 就 不 再 袭 述 了 。 此 处 
创建 了 一 个 名 称 为 9.2.html 文档 ， 如 图 9-4 所 示 。 


[加 添加 CSS 样式 。 
@ 在 设计 模式 中 ,选中 “使 用 CSS 标记 修饰 ”段落 后 ， 右 击 并 在 弹出 的 快捷 菜单 中 选择 
【CSS 样式 】> 【新建 】 命 令 ， 弹 出 如 图 9-5 所 示 的 对 话 框 。 


如 CSS 规则 
选择 器 类 型 : 


| 代 丙 | 拆 分 [设计 | 实时 视图 | 哆 . @. 


为 Css 规 网 选择 上 下 文选 择 器 类 型 、 一 一 - 
标签 《重新 定义 ETWL 元 未) 
= 襄 修 从 
使 用 Css 标记 修饰 ee 
选 泽 或 缩 入选 笃 器 名称， 


本 
BS 


规则 定义 : 
尘 综 定 又 起 则 的 这 里， 


《全 二 六 稳 》 


ED 


图 9-4 网 页 显示 窗口 图 9-5 “新 建 CSS 规则 ”对 话 框 


@ 在 【为 CSS 规则 选择 上 下 文选 择 器 类 型 】 下 拉 列 表 中 选择 【标签 (重新 定义 HIML 元 
素 )〗】 选 项 (学习 后 面 章节 内 容 后 ， 读 者 可 以 根据 需要 选择 不 同 的 选择 器 类 型 ) ， 然 后 单 击 【 确 
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定 】 按 钮 ， 即 可 显示 如 图 9-6 所 示 的 对 话 框 。 
全 在 对 话 框 中 可 以 设置 p 的 样式 ， 设 置 完 成 后 单 击 【 确 定 】 按 钮 。 此 时 ，HTML 文档 内 
容 发 生 了 变化 ， 如 图 9-7 所 示 。 


的 CSS 和 定义 x 


六 
2 得 


代码 | 拆 分 设计 | 实时 视图 哆 . 已 内. 
使 用 Css 标 记 修 饰 | 


Es 
Ei 


图 9-6 “p 的 CSS 规则 定义 ”对 话 框 图 9-7 设置 完成 显示 


从 代码 模式 可 以 看 到 ， 在 head 部 分 中 增加 了 一 个 <style> 标 记 放 置 CSS 样式 ， 该 样式 用 来 
修饰 段落 p。 


到 运行 HTML 文档 


在 正 11.0 中 预览 该 网 页 ， 其 显示 结果 如 图 9-8 所 示 , 可 以 看 到 字体 颜色 设置 为 浅 红色 ,大 
小 为 18 像素 ， 字 体 加 粗 。 


- 0O x 
制 ”D:\ 本 书 源 代码 \code 渤 图 ”搜索 

总 使 用 CSS 样 式 x 上 

文件 (F) 编辑 (E) 查看 (V) 收藏 夫 (A) 工具 (T) 帮助 (H) 

请 各 百度 一 下 ， 你 闵 知道 


使 用 CSS 标 记 修饰 


图 9-8 CSS 样式 显示 


UT 


上 述 使 用 Dreamweaver 创建 CSS 的 方法 ， 只 是 其 中 一 种 ， 读 者 还 可 以 直接 在 代码 模式 
编写 CSS 代码 ， 此 时 会 有 很 好 的 语法 提示 。 


9.3 在 HTML5 中 使 用 CSS3 的 方法 
CSS 样式 表 能 很 好 地 控制 页 面 显示 ， 分 离 网 页 内 容 和 样式 代码 ， 它 控制 HIMLS 页 面 效果 
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的 方式 通常 包括 行内 样式 、 内 嵌 样 式 、 链 接 样式 和 导入 样式 。 


9.3.1 行内 样式 


行内 样式 是 所 有 样式 中 比较 简单 、 直 观 的 方法 ， 它 可 以 直接 把 CSS 代码 添加 到 HTML 文 
件 中 ， 是 作为 HIML 的 标记 属性 存在 的 。 通 过 这 种 方法 ， 可 以 很 简单 地 对 某 个 元 素 单独 定义 
样式 。 

使 用 行内 样式 方法 直接 在 HTML 标记 中 使 用 style 属性 , 该 属性 的 内 容 就 是 CSS 的 属性 和 
值 。 例 如 : 


<p style="color:red"> 段 落 样 式 </p> 


【 例 9.3】〔 实 例文 件 ，ch09\9.3.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 行 内 样式 </title> 

</head> 

<body> 

<p 
style="color:red;font-size:20px;text-decoration:underline; text-align:center 
"> 此 段落 使 用 行内 样式 修饰 </p> 

<p style="color:blue;font-style:italic"> 正 文 内 容 </p> 

</body> 

</html> 


在 下 11.0 中 浏览 效果 如 图 9-9 所 示 ， 可 以 看 到 两 个 p 标记 中 都 使 用 了 style 属性 ， 并 且 设 
置 了 CSS 样式 ， 各 个 样式 之 间 互 不 影响 ， 分 别 显示 自己 的 样式 效果 。 第 一 个 段落 为 红色 字体 ， 
居中 显示 且 带 有 下 画 线 ， 第 二 个 段落 为 蓝 色 字体 ， 并 以 斜体 显示 。 

下 DANF 书 好 fi5ode\ 国 二 
七 行内 本 式 J 


文件 (F) 连 有 (FE) 查看 (V) 改 苦 去 (A) 工具 (TD 帮助 (H) 
户 全 百 广 -下 ,Sin 


正 广 风疹 


图 9-9 行内 样式 显示 


尽管 行内 样式 简单 ， 但 这 种 方法 并 不 常用 ， 因 为 这 样 添加 无 法 完全 发 挥 样式 表 “ 内 容 结构 
和 样式 控制 代码 分 离 ” 的 优势 ， 而 且 这 种 方式 也 不 利于 样式 的 重用 。 如 果 为 每 一 个 标记 都 设置 
style 属性 ， 那 么 后 期 维护 成 本 会 过 高 ， 网 页 也 容易 过 胖 ， 故 不 推荐 使 用 。 
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9.3. 


进行 
较 简 


接 将 
内 容 
挥 作 


2 内藤 样式 

内 嵌 样 式 就 是 将 CSS 样式 代码 添加 到 <head> 与 <head> 之 间 ， 并 且 用 <style> 和 </style> 标 记 
声明 。 这 种 写法 虽然 没有 实现 页 面 内 容 和 样式 控制 代码 完全 分 离 ， 但 可 以 用 于 设置 一 些 比 
单 且 需 要 样式 统一 的 页 面 。 其 格式 如 下 : 


<head> 

<style type="text/css"> 
p{color:red;font-size:12px;} 
</style> 

</head> 


有 些 较 低 版 本 的 浏览 器 不 识别 <style> 标 记 ， 不 能 将 样式 正确 地 应 用 到 页 面 显 示 上 , 而 是 直 
标记 中 的 内 容 以 文本 的 形式 显示 。 为 了 解决 此 类 问题 ， 可 以 使 用 HMTL 注释 将 标记 中 的 
隐藏 。 如 果 浏 览 器 能 够 识别 <style> 标 记 , 则 标记 内 被 注释 的 CSS 样式 定义 代码 依旧 能 够 发 


:> 


Ho 


<head> 

<style type="text/css"> 

过 = 
p{color:red;font-size:12px;} 
= 三 

</style> 

</head> 


【 例 9.4】 实例 文件 ，ch09\9.4.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 内 嵌 样 式 </title> 

<style type="text/css"> 

pt{ 
color:orange; /* 设 置 字体 颜色 为 橙色 */ 
text-align:center; /* 设 置 段 落 居中 显示 */ 
font-weight:bolder; ”/* 设 置 字体 加 粗 效 果 */ 
font-size:25px; /* 设 置 字体 大 小 */ 

| 

</style> 

</head><body> 

<p> 此 段落 使 用 内 嵌 样 式 修饰 </P> 

<p> 正 文 内 容 </p> 

</body> 

</html> 


在 正 11.0 中 浏览 效果 如 图 9-10 所 示 , 可 以 看 到 两 个 段落 都 被 CSS 样式 修饰 且 样 式 保持 一 


i 
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致 ， 均 为 段落 居中 、 加 粗 并 以 橙色 字体 显示 。 


- oO x 
要 “DA 十 书 逐 Kode 国 - 他 | 搜 未 - 
[ED x 四 
将 下, trans 


此 段落 使 用 内 赃 样 式 修饰 
正文 内 容 


图 9-10 ”内 嵌 样 式 显 示 


在 上 面 的 例子 中 ， 所 有 CSS 编码 都 在 style 标记 里 ， 既 方便 了 后 期 维护 ， 页 面 与 行内 样式 
相 比较 也 大 大 瘦身 了 。 但 如 果 一 个 网 站 拥有 很 多 页 面 ， 且 对 于 不 同 页 面 段落 都 希望 采用 同样 的 
风格 时 ， 内 婴 方 式 就 显得 有 点 麻烦 。 该 方法 只 适用 于 特殊 页 面 设置 单独 的 样式 风格 。 


9.3.3 ”链接 样式 


链接 样式 是 CSS 中 使 用 频率 最 高 ， 也 是 最 实用 的 方法 。 它 可 以 很 好 地 将 “页 面 内 容 ” 和 
“样式 风格 代码 ”分 离 成 两 个 文件 或 多 个 文件 ， 实 现 了 页 面 框架 HTML 代码 和 CSS 代码 的 完 
成 分 离 ， 使 前 期 制作 和 后 期 维护 都 十 分 方便 。 同 一 个 CSS 文件 , 根据 需要 可 以 链接 到 网 站 中 所 
有 的 HTML 页 面 上 ， 使 得 网 站 整体 风格 统一 ， 并 且 后 期 维护 的 工作 量 也 大 大 减少 。 

链接 样式 是 指 在 外 部 定义 CSS 样式 表 并 形成 以 .css 为 扩展 名 的 文件 ， 然 后 在 页 面 中 通过 
<link> 标 记 链接 到 页 面 中 。 该 链接 语句 必须 放 在 页 面 的 <head> 标 记 区 ， 代 码 如 下 : 


<link rel="stylesheet" type="text/css" href="1.css"” /> 


(1) rel 表示 链接 到 样式 表 ， 其 值 为 stylesheet。 
(2) type 表示 样式 表 类 型 为 CSS 样式 表 。 
(3) href 指定 了 CSS 样式 表 文 件 的 路 径 ， 此 处 表示 当前 路 径 下 名 称 为 1.css 文件 。 


这 里 使 用 的 是 相对 路 径 。 如 果 HTML 文档 与 CSS 样式 表 没 有 在 同一 路 径 下 ， 则 需要 指定 
样式 表 的 绝对 路 径 或 引用 位 置 。 


【 例 9.5】〔 实 例文 件 : ch09\9.5.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 链 接 样 式 </title> 

<link rel="stylesheet" type="text/css" href="9.5.css"/> 
</head> 


se 
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<body> 

<h1>CSS 学 习 </h1> 

<p> 此 段落 使 用 链接 样式 修饰 </p> 
</body> 

</html> 


【 例 9.5】〔 实 例文 件 : ch09\9.5.css) 


hi{ 
text-align:center; /* 设 置 标题 居中 显示 */ 
} 
pt{ 
font-weight:29px; /* 设 置 字体 的 粗细 */ 
text-align:center; /* 设 置 段 落 居中 显示 */ 
font-style:italic; /* 设 置 字体 样式 为 斜体 */ 
} 
在 正 11.0 中 浏览 效果 如 图 9-11 所 示 ， 其 中 标题 和 段落 以 不 同样 式 显示 ， 标 题 居 中 显示 ， 
段落 以 斜体 居中 显示 。 
DTN\code RB -OO 二 


| 局 te 式 x 
育 全 ERE- 下 , fanE 


CSS 学 习 | 


ds NEL Ld 


图 9-11 链接 样式 显示 


链接 样式 最 大 的 优势 就 是 将 CSS 代码 和 HTML 代码 完全 分 离 ,， 并 且 同 一 个 CSS 文件 能 被 
不 同 的 HTML 文件 链接 使 用 。 


在 设计 整个 网 站 时 ， 为 了 实现 相同 的 样式 风格 ， 可 以 将 同一 个 CSS 文件 链接 到 所 
导电 有 的 页 面 中 。 如 果 整 个 网 站 需要 修改 样式 ， 则 只 修改 CSS 文件 即 可 。 


9.3.4 导入 样式 


导入 样式 和 链接 样式 基本 相同 , 都 需要 创建 一 个 单独 的 CSS 文件 , 然后 将 其 引入 到 HIML 
文件 中 ， 只 不 过 语法 和 运作 方式 有 所 差别 。 采 用 导入 样式 是 在 HIML 文件 初始 化 时 ， 会 被 导 
入 到 HTML 文件 内 作为 文件 的 一 部 分 ， 类 似 于 内 顽 效 果 。 而 链接 样式 则 是 在 HTML 标记 需要 
样式 风格 时 才 以 链接 方式 引入 。 

导入 外 部 样式 表 是 指 在 内 顽 样 式 表 的 <style> 标 记 中 使 用 @import 导入 一 个 外 部 的 CSS 文 
件 。 例 如 : 
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<head> 
<style type="text/css"> 
< 
Qimport "1.css" 
一 -> 
</style> 
</head> 


导入 外 部 样式 表 相当 于 将 样式 表 导入 到 内 由 样式 表 中 ， 其 中 @import 必须 在 样式 表 的 开始 
部 分 (即位 于 其 他 样式 表 代码 的 上 面 〉。 


【 例 9.6】 实 例文 件 ，ch09\9.6.html) 
<!DOCTYPE html> 

<html> 

<head> 
<title> 导 入 样式 </title> 
<style> 

@import "9.6.css" 
</style> 

</head> 

<body> 

<h1>CSS 学 习 </h1> 

<p> 此 段落 使 用 导入 样式 修饰 </p> 
</body> 

</html> 


【 例 9.6】【〔 实 例文 件 ，ch09\9.6.css) 


hi{text-align:center; /* 设 置 标题 居中 显示 */ 
color:#0000ff; /* 设 置 标题 的 颜色 为 蓝 色 */ 
. 

p{font-weight:bolder; /* 设 置 字体 的 粗细 */ 
text-decoration:underline; ”/* 设 置 下 夯 线 效果 */ 
font-size:20px; /* 设 置 字体 的 大 小 */ 


’ 


正 11.0 中 浏览 效果 如 图 9-12 所 示 ， 其 中 标题 和 段落 以 不 同样 式 显示 ， 标 题 居中 显示 、 颜 
色 为 蓝 色 ， 段 落 的 字体 设置 为 加 粗 、 下 画 线 ， 大 小 为 20 像素 。 


- OO x 
(< OO RE 

|S St x 加 

请 他 百 度 一 下 ,你 Bi 道 


CSS 学 习 
此 段落 使 用 导入 样式 修饰 


图 9-12 导入 样式 显示 
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导入 样式 与 链接 样式 比较 ， 最 大 的 优势 就 是 可 以 一 次 导入 多 个 CSS 文件 。 其 格式 如 下 : 


<style> 
@import "9.6.css" 
@import "test.css" 
</style> 


9.3.5 ”优先 级 问题 
如 果 同 一 个 页 面 采用 了 多 种 CSS 样式 表 方式 (如 同时 使 用 行内 样式 、 链 接 样 式 和 内 嵌 样 
式 ) ， 且 这 几 种 方式 共同 作用 于 同一 属性 ， 就 会 出 现 优先 级 问题 。 例 如 使 用 内 峰 样 式 设置 字体 


为 宋体 ， 使 用 链接 样式 设置 字体 为 红色 ， 那 么 二 者 会 同时 生效 ， 但 如 果 都 设置 字体 颜色 且 颜 色 
不 同 ， 那 么 哪 种 样式 的 设置 才 有 效 呢 ? 


1. 行内 样式 和 内 译 样 式 比较 
例如 ， 有 这 样 一 种 情况 : 


<style> 

p{color:red} 

</style> 

<p style="color:blue"> 段 落 应 用 样式 </p> 


在 样式 定义 中 ， 段 落 标 记 <p> 匹 配 了 两 种 样式 规则 ， 一 种 使 用 内 样式 定义 颜色 为 红色 ， 一 
种 使 用 p 行内 样式 定义 颜色 为 蓝 色 ， 而 在 页 面 代码 中 ， 该 标记 使 用 了 类 选择 符 。 但 是 ， 标 记 内 
容 最 终 会 以 哪 一 种 样式 显示 了 呢 ? 


【 例 9.7】 《实例 文件 ，ch09\9.7.html) 
<!DOCTYPE html> 

<html> 

<head> 

<title> 优 先 级 比较 </title> 
<style> 

p{color:red} 

</style> 

</head> 

<body> 

<p style="color:blue"> 优 先 级 测试 </p> 
</body> 

</html> 


在 正 11.0 中 浏览 效果 如 图 9-13 所 示 ， 段 落 以 蓝 色 字体 显示 ， 可 以 看 出 行内 样式 优先 级 大 
于 内 嵌 样 式 。 
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= 口 x 
@ 站 D:\ 本 书 源 代码 \code 泊 图 7 人 0 
车 优先 级 比较 x 四 
请 当 百 度 - 下 , 你 和 0 道 
优先 级 测试 


图 9-13 优先 级 显示 


2. 内 嵌 样 式 和 链接 样式 比较 
以 相同 例子 测试 内 嵌 样 式 和 链接 样式 的 优先 级 。 将 相应 的 颜色 样式 代码 单独 放 在 一 个 CSS 
文件 中 ， 供 链接 样式 引用 。 


【 例 9.8】 实例 文件 ，ch09\9.8.html) 
<!DOCTYPE html> 

<html> 

<head> 

<title> 优 先 级 比较 </title> 

<link href="9.8.css" type="text/css" rel="stylesheet"> 
<style>p{color:red} 
</style></head> 

<body> 

<p> 优 先 级 测试 </p> 

</body> 

</html> 


【 例 9.8】 实例 文件 ，ch09\9.8.css) 

p{color:yellow} 

在 正 11.0 中 浏览 效果 如 图 9-14 所 示 ， 段 落 以 红色 字体 显示 ， 可 以 看 出 内 媒 样 式 优先 级 大 
于 链接 样式 。 


- OO x 
@ 要 ”DA 本 书 源 代码 \code 六 图 -0 
忆 优先 级 比较 x 加 

请 全 百度 下， 你 Bi 和 0 道 

优先 级 测试 


图 9-14 ”优先 级 测试 


3. 链接 样式 和 导入 样式 
现在 进行 链接 样式 和 导入 样式 的 优先 级 比较 。 分 别 创 建 两 个 CSS 文件 ， 一 个 作为 链接 ， 
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一 个 作为 导入 。 


【 例 9.9】 《实例 文件 : ch09\9.9.html) 
<!DOCTYPE html> 

<html> 

<head> 

<title> 优 先 级 比较 </title> 
<style> 

@import "9.9 2.C53" 

</style> 

<link href="9.9 1.css" type="text/css" rel="stylesheet"> 
</head> 

<body> 

<p> 优 先 级 测试 </p> 

</body> 

</html> 


【 例 9.9】〔 实 例文 件 ，ch09\9.9_1.css) 


p{color:green} 


【 例 9.9】〔 实 例文 件 ，ch09\9.9_2.css) 

p{color:purple} 

在 正 11.0 中 浏览 效果 如 图 9-15 所 示 ， 段 落 以 绿色 显示 ， 可 以 看 出 链接 样式 优先 级 大 于 导 
入 样式 。 


-~ OO x 
@ 闫 ”DA 本 书 源 代码 code 图 ~ 
大 优先 级 比较 x 加 

评 当 百 度 一 下 ， 你 就 知道 

优先 级 测试 


图 9-15 优先 级 比较 


通过 比较 ，CSS 样式 表 方 式 的 优先 级 顺序 由 大 到 小 依次 为 : 行内 样式 、 内 购 样 式 、 链 接 样 
式 和 导入 样式 。 


9.4 CSS3 选择 器 


选择 器 (selector) 也 被 称 为 选择 符 。 所 有 HTML 语言 中 的 标记 都 是 通过 不 同 的 CSS 选择 
器 进行 控制 的 。 选 择 器 不 只 是 HMTL 文档 中 的 元 素 标记 ， 它 还 可 以 是 类 (Class， 这 不 同 于 面 


HTJmL5+CSS3+TjQuery Mobile+Bootstrap 开发 APP 从 入 门 到 精通 〈 视 频 教 学 版 ) 


向 对 象 程序 设计 语言 中 的 类 ) 、ID 元素 的 唯一 特殊 名 称 ,便于 在 脚本 中 使 用 ) 或 是 元 素 的 某 
种 状态 〈 如 alink) 。 根 据 CSS 选择 器 用 途 可 以 把 选择 器 分 为 标记 选择 器 、 类 选择 器 、 全 局 选 
择 器 、ID 选择 器 和 伪 类 选择 器 等 。 


9.4.1 标记 选择 器 


HTML 文档 是 由 多 个 不 同 标记 组 成 的 ， 而 CSS 选择 器 就 是 声明 那些 标记 的 样式 风格 。 例 
如 ,Pp 选择 器 就 是 用 于 声明 页 面 中 所 有 <p> 标 记 的 样式 风格 ， 同 样 也 可 以 通过 hl 选择 器 来 声明 
页 面 中 所 有 <hl> 标 记 的 样式 风格 。 

标记 选择 器 基本 的 形式 如 下 : 


tagName{property:value} 


其 中 tagName 表示 标记 名 称 ， 如 p、hl 等 HTML 标记 ; property 表示 CSS3 属性 ; 
技 


[GE value 表示 CSS3 属性 值 。 


通过 声明 一 个 具体 标记 ， 可 以 对 文档 里 这 个 标记 出 现 的 每 一 个 地 方 应 用 样式 定义 ， 这 种 做 
法 通常 用 在 设置 整个 网 站 都 会 出 现 的 基本 样式 。 例如， 下 面 的 定义 就 用 于 为 一 个 网 站 设置 默认 
字体 。 
body, p> td th, av blockauote, dl ul: ol 
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif; 
font-size: lem; 


color: #000000; 
| 


这 个 选择 器 声明 了 一 系列 的 标记 ， 所 有 这 些 标 记 出 现 的 地 方 都 将 以 定义 的 样式 (字体 、 字 
号 和 颜色 ) 显示 。 理 论 上 仅 声 明 (body》 标记 就 已 经 足够 (因为 所 有 其 他 标记 会 出 现在 《body) 
标记 内 部 ， 并 且 将 因此 继承 它 的 属性 ) ， 但 是 许多 浏览 器 不 能 恰当 地 将 这 些 样式 属性 带 入 表格 
和 其 他 标记 里 。 因 此 ， 为 了 避免 这 种 情况 这 里 声明 了 其 他 标记 。 


【 例 9.10】〔 实 例文 件 : ch09\9.10.html) 
<!DOCTYPE html> 

<html> 

<head> 

<title> 标 记 选 择 器 </title> 

<style> 

p{color:blue; /* 设 置 字体 的 颜色 为 蓝 色 */ 
font-size:20px; /* 设 置 字 体 的 大 小 */ 
} 

</style> 

</head> 


Oy 
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<body> 

<p> 此 处 使 用 标记 选择 器 控制 段落 样式 </p> 
</body> 

</html> 


在 正 11.0 中 浏览 效果 如 图 9-16 所 示 ， 可 以 看 到 段落 字体 以 蓝 色 显示 ， 大 小 为 20 像素 。 


Ed 口 x 
@ 司 “Dx 本 书 源 代码 code\ 放 国 ”他 搜索 
| 号 标 迁 E 吕 x 回 
元 汪 百 度 一 下 , 你 知道 


此 处 使 用 标签 选择 器 控制 段落 样式 


图 9-16 标记 选择 器 显示 
如 果 在 后 期 维护 中 需要 调整 段落 颜色 ， 则 只 修改 color 属性 值 即 可 。 


C883 标准 对 于 所 有 属性 和 和 值 都 有 相对 严格 的 和 要求， 总 果 声 明 的 属性 在 CSS3 规范 
5 可 中 没有 或 某 个 属性 值 不 符合 属性 要 求 ， 都 不 能 使 CSS 语句 生效 。 


9.4.2 ”类 选择 器 

使 用 标记 选择 器 可 以 控制 该 页 面 中 所 有 相关 标记 的 显示 样式 , 如 果 需 要 对 其 中 一 系列 标记 
重新 设置 ， 此 时 仅 使 用 标记 选择 器 是 远 远 不 够 的 ， 还 需要 使 用 类 选择 器 。 

类 选择 器 用 来 为 一 系列 标记 定义 相同 的 呈现 方式 ， 常 用 的 语法 格式 如 下 : 


.classValue{property:value} 


classValue 是 选择 器 的 名 称 ， 具 体 名 称 由 CSS 制定 者 自己 命名 。 如 果 一 个 标记 具有 class 
属性 且 class 属性 值 为 classValue, 那么 该 标记 的 呈现 样式 由 该 选择 器 指定 。 在 定义 类 选择 符 时 ， 
需要 在 classValue 前 面 加 一 个 句点 “.”， 例 如 : 


.rd{color:red} /* 设 置 字体 的 颜色 为 红色 */ 

.se{font-size:3px} /* 设 置 字 体 的 大 小 */ 

上 面 定义 了 两 个 类 选择 器 ， 分 别 为 rd 和 se。 类 的 名 称 可 以 是 任意 英文 字符 串 或 以 英文 开 
头 与 数字 的 组 合 ， 一 般 情况 下 采用 其 功能 或 效果 的 缩写 。 

在 <p> 标 记 的 class 属性 中 使 用 类 选择 符 。 

<p class="rd">class 属性 是 被 用 来 引用 类 选择 器 的 属性 </p>。 

类 选择 器 只 能 被 应 用 于 指定 的 标记 中 《如 <p> 标 记 ) ， 可 以 在 不 同 标记 中 使 用 相同 的 呈现 
方式 ， 如 下 所 示 。 
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<p class="rd"> 段 落 样式 </p> 
<h3 class="rd"> 标 题 样式 </h3> 


【 例 9.11】〔 实 例文 件 : ch09\9.11.html) 


<!DOCTYPE html> 

<html> 

<head><title> 类 选择 器 </title> 

<style> 

-aaf 
color:blue; /* 设 置 字体 的 颜色 为 蓝 色 */ 
font-size:20px; /* 设 置 字 体 的 大 小 为 20px*/ 

} 

:bb 
color:red; /* 设 置 字体 的 颜色 为 红色 */ 
font-size:22px; /* 设 置 字体 的 大 小 为 22px*/ 

} 

</style></head><body> 

<h3 class="bb"> 学 习 类 选择 器 </h3> 

<p class="aa"> 此 处 使 用 类 选择 器 aa 控 制 段 落 样 式 </p> 

<p class="bb"> 此 处 使 用 类 选择 器 bb 控制 段落 样式 </p> 

</body> 

</html> 


在 正 11.0 中 浏览 效果 如 图 9-17 所 示 , 可 以 看 到 第 一 段落 字体 以 蓝 色 显 示 , 大 小 为 20 像素 ; 
第 二 段落 字体 以 红色 显示 ， 大 小 为 22 像素 ， 标 题字 体 同样 以 红色 显示 ， 大 小 为 22 像素 。 
四 DA 不 忆 汪 人 \code 图 -人 0 a 


| nis 
请 5- 下, rounE 


学 习 类 选择 器 
此 处 使 用 类 选择 器 aa 控制 段落 样式 
此 处 使 用 类 选择 器 bb 控制 段落 样式 


图 9-17 类 选择 器 显示 


9.4.3 ID 选择 器 


ID 选择 器 和 类 选择 器 类 似 ， 都 是 针对 特定 属性 的 属性 值 进行 匹配 的 。ID 选择 器 定义 的 是 
某 一 个 特定 的 HIML 标记 ， 一 个 网 页 文件 中 只 能 有 一 个 标记 使 用 某 一 ID 的 属性 值 。 
定义 ID 选择 器 的 基本 语法 格式 如 下 : 


#idValue{property:value} 


在 上 述 基 本 语法 格式 中 ，idValue 是 选择 器 名 称 ， 可 以 由 CSS 定义 者 自己 命名 。 如 果菜 标 
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记 具 有 id 属性 ， 并且 该 属性 值 为 idtValue， 那 么 该 标记 的 呈现 样式 由 该 ID 选择 器 指定 。 在 正常 
情况 下 ，id 属性 值 在 文档 中 具有 唯一 性 。 在 定义 JD 选择 器 时 ， 需 要 在 idValue 前 面 加 一 个 “#” 
符号 ， 例 如 : 


#fontstyle 

1 
color:red; /* 设 置 字体 的 颜色 为 红色 */ 
font-weight:bold; /* 设 置 字体 的 粗细 */ 
font-size:large /* 设 置 字体 的 大 小 */ 

L 


与 类 选择 器 相 比 , 使 用 ID 选择 器 定义 样式 是 有 一 定局 限 性 的 。 类 选择 器 与 ID 选择 器 主要 
有 以 下 两 种 区 别 : 


(1) 类 选择 器 可 以 给 任意 数量 的 标记 定义 样式 , 但 选择 器 在 页 面 的 标记 中 只 能 使 用 一 次 。 
(2) ID 选择 器 比 类 选择 器 具有 更 高 的 优先 级 ， 即 当 ID 选择 器 与 类 选择 器 发 生 冲 突 时 ， 
优先 使 用 ID 选择 器 定义 的 样式 。 


【 例 9.12】〔 实 例文 件 ，ch09\9.12.html) 


<!DOCTYPE html> 
<html> 
<head> 
<title>ID 选 择 器 </title> 
<style> 
#fontstylef{ 
color:blue; /* 设 置 字体 的 颜色 为 蓝 色 */ 
font-weight:bold; /* 设 置 字体 的 粗细 */ 
} 
#textstylef{ 
color:red; /* 设 置 字体 的 颜色 为 红色 */ 
font-size:22px; /* 设 置 字体 的 大 小 */ 
</style> 
</head> 
<body> 
<h3 id="textstyle"> 学 习 ID 选 择 器 </h3> 
<p id="textstyle"> 此 处 使 用 ID 选 择 器 textsyle 控 制 段落 样式 </p> 
<p id="fontstyle"> 此 处 使 用 ID 选 择 器 fontstyle 控 制 段落 样式 </p> 
</body> 
</html> 


在 正 11.0 中 浏览 效果 如 图 9-18 所 示 , 可 以 看 到 第 一 段落 字体 以 红色 显示 , 大 小 为 22 像素 ; 
第 二 段落 字体 以 蓝 色 显示 ， 字 体 加 粗 ; 标题 字体 同样 以 红色 显示 ， 大 小 为 22 像素 。 
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- 0O x 
@ 司 “Dx 平 书 巡 Node 下 国 ”人 雪琴 PDP- 个 
| 总 ID 法 把 荐 > 

认 生 到- 下, fn 

学 习 IJD 选 择 器 


此 处 使 用 ID 选择 器 textstyle 控 制 段 落 样式 
此 处 使 用 也 选 择 器 fontstyle 控 制 段落 样式 


图 9-18 了 D 选择 器 显示 


从 上 面 代码 中 可 以 看 出 , 标题 b 和 第 一 段落 都 使 用 了 名 称 为 textstyle 的 ID 选择 器 并 都 显 
示 了 CSS 方案 ， 但 这 里 需要 指出 的 是 ， 将 ID 选择 器 用 于 多 个 标记 是 错误 的 ， 因 为 每 个 标记 定 
义 的 ID 不 只 是 CSS 可 以 调用 ，JavaScript 等 脚本 语言 同样 也 可 以 调用 。 如 果 一 个 HTML 中 有 
两 个 相同 id 的 标记 ， 那 么 将 会 导致 JavaScript 在 查找 id 时 出 错 。 


由 于 JavaScript 等 脚本 语言 也 能 调用 HTML 中 设置 的 这 ， 因 此 总 选择 器 一 直 被 广 
5 泛 使 用 。 网 页 设计 者 在 编写 HTML 代码 时 应 该 养 成 一 个 习惯 ， 一 个 id 只 赋予 一 个 
HTML 标记 。 


9.4.4 全 局 选择 器 


如 果 想 要 一 个 页 面 中 所 有 HTML 标记 使 用 同一 种 样式 ， 就 可 以 使 用 全 局 选择 器 。 全 局 选 
择 器 ， 顾 名 思 义 就 是 对 所 有 HTML 标记 起 作用 。 其 语法 格式 如 下 : 


*{property:value} 


其 中 ，“*” 表 示 对 所 有 标记 起 作用 ; property 表示 CSS3 属性 名 称 ，value 表示 属性 值 。 
示例 如 下 : 


*{margin:0; padding:0;} /* 设 置 所 有 标记 的 外 边 距 和 内 边 距 都 为 0*/ 


【 例 9.13】 实例 文件 ，ch09\9.13.html) 
<!DOCTYPE html> 
<html> 
<head><title> 全 局 选择 器 </title> 
<style> 
5 
color:red; /* 设 置 字体 的 颜色 为 红色 */ 
font-size:30px /* 设 置 字 体 的 大 小 为 30px*/ 
} 
</style> 
</head> 
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<body> 

<p> 使 用 全 局 选择 器 修饰 </p> 
<p> 第 一 段 </p> 
<h1> 第 一 段 标题 </h1> 
</body> 

</html> 


在 正 11.0 中 浏览 效果 如 图 9-19 所 示 ， 两 个 段落 和 标题 都 是 以 红色 字体 显示 ， 字 体 大 小 为 
30 像素 。 


DET eT RE 5- 
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图 9-19 全 局 选择 器 


9.4.5 组 合 选择 器 


将 多 种 选择 器 进行 搭配 , 可 以 构成 一 种 复合 选择 器 , 也 称 为 组 合 选择 器 , 即将 标记 选择 器 、 
类 选择 器 和 ID 选择 器 组 合 起 来 使 用 。 一 般 的 组 合 方式 是 标记 选择 器 和 类 选择 器 组 合 或 标记 选 
至 器 和 ID 选择 器 组 合 ， 由 于 这 两 种 组 合 方式 的 原理 和 效果 一 样 ， 所 以 本 小 节 只 介绍 标记 选择 
器 和 类 选择 器 的 组 合 。 
组 合 选择 器 只 是 一 种 组 合 形式 ， 并 不 是 一 种 真正 的 选择 器 ， 但 在 实际 应 用 中 会 经 常 使 用 。 
其 语法 格式 如 下 : 


tagName. class Value{property:value} 


一 般 用 在 重复 出 现 且 样式 相同 的 标记 里 ， 如 二 列表 、td 单元 格 、 和 dd 自 定义 列表 等 。 例 如 : 


hl.red{color: red} 
<hl class="red"></h1> 


【 例 9.14】“〈 实 例文 件 : ch09\9.14.html) 
<!DOCTYPE html> 

<html> 

<head> 

<title> 组 合 选择 器 </title> 


<style> 
p{ /* 标 记 选 择 器 */ 
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color:red 
} 
p.firstPar{/* 组 合 选 择 器 */ 
color:blue 
1 
.firstPar{/* 类 选择 器 */ 
color:green 
} 
</style> 
</head> 
<body> 
<p> 这 是 普通 段落 </p> 
<p class="firstPar"> 此 处 使 用 组 合 选 择 器 </p> 
<hl class="firstPar"> 我 是 一 个 标题 </h1> 
</body> 
</html> 


在 下 11.0 中 浏览 效果 如 图 9-20 所 示 ， 可 以 看 到 第 一 段落 颜色 为 红色 ， 采 用 的 是 标记 选择 
器 ; 第 二 段落 显示 的 是 蓝 色 ， 采 用 的 是 标记 选择 器 和 类 选择 器 组 合 的 选择 器 ;标题 以 绿色 字体 
显示 ， 采 用 的 是 类 选择 器 。 

名 DAF 忆 pode YO -OO 加 
EE * 同 

| 
这 是 普通 段 沙 
此 处 使 用 组 合 选 择 器 


我 是 一 个 标题 


图 9-20 组 合 选择 器 显示 


9.4.6 ”继承 选择 器 

继承 选择 器 的 规则 是 : 子 标记 在 没有 定义 的 情况 下 所 有 的 样式 是 继承 父 标记 的 ， 当 子 标记 
重新 定义 父 标记 已 经 定义 过 的 声明 时 ， 子 标记 会 执行 后 面 的 声明 ， 其 中 与 父 标记 不 冲突 的 地 方 
仍然 沿用 父 标记 的 声明 。 

使 用 继承 选择 器 就 必须 先 了 解 HTML 文档 树 和 CSS 继承 ， 这 样 才 能 够 很 好 地 运用 继承 选 
择 器 。 每 个 HIML 都 可 以 被 看 作 一 个 文档 树 , 文档 树 的 根部 就 是 <html> 标 记 , 而 <head> 和 <body> 
标记 就 是 其 标记 。 在 <head> 和 <body> 里 的 其 他 标记 就 是 <html> 标 记 的 孙子 标记 ， 整 个 HTML 
就 呈现 一 种 祖先 和 子孙 的 树 状 关系 。CSS 的 继承 是 指 子孙 标记 继承 祖先 标记 的 某 些 属 性 ， 示 例 
如 下 : 


CSS3 快速 入 门 第 9 澡 


<div class="test"> 
<span><img src="xxx" alt=" 示 例 图 片 "/></span> 
</div> 


对 于 上 面 代码 而 言 ， 如 果 其 修饰 样式 为 下 面 代码 : 


-test span img {border:1lpx blue solid;} 


则 表示 该 选择 器 先 找到 class 为 test 的 标记 ， 然 后 从 它 的 子 标记 里 查找 <span> 标 记 ， 再 从 
<span> 的 子 标记 中 找到 <img> 标 记 。 也 可 以 采用 下 面 的 形式 : 


div span img {border:lpx blue solid;} 
可 以 看 出 其 规律 是 从 左 往 右 依 次 细 化 ， 最 后 锁定 要 控制 的 标记 。 


【 例 9.15】〔 实 例文 件 ， ch09\9.15.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 继 承 选择 器 </title> 

<style type="text/css"> 

hlfcolor:red; text-decoration:underline;} 
hl strong{color:#004400; font-size:40px;} 
hl font{font-size:20px;} 

</style> 

</head> 

<body> 

<h1> 测 试 CSS 的 <strong> 继 承 </strong> 效 果 </h1> 
<h1> 此 处 使 用 继承 <font> 选 择 器 </font> 了 么 ? </h1> 
</body> 

</html> 


在 下 11.0 中 浏览 效果 如 图 9-21 所 示 ， 可 以 看 到 第 一 个 标题 颜色 为 红色 ， 但 是 “继承 ”两 
个 字 使 用 绿色 显示 并 且 大 小 为 40 像素 ， 除 了 这 两 个 设置 外 的 其 他 CSS 样式 都 是 继承 父 标记 
<h1> 的 样式 (例如 下 夯 线 设置 )。 第 二 个 标题 虽然 使 用 了 font 标记 修饰 选择 器 ， 但 其 样式 都 是 
继承 于 父 类 标记 <h1>。 


| CR eT ER Pp- 
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试 CSS 
此 处 使 用 继承 远 插 尖 了 么 ? 


图 9-21 继承 选择 器 
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9.4.7 伪 类 


伪 类 也 是 选择 器 的 一 种 ， 但 是 用 伪 类 定义 的 CSS 样式 并 不 是 作用 在 标记 上 的 ， 而 是 作用 
在 标记 的 状态 上 。 由 于 很 多 浏览 器 支持 不 同类 型 的 伪 类 ， 并 且 没有 一 个 统一 的 标准 ， 所 以 很 多 
伪 类 都 不 常 被 用 到 。 伪 类 包括 :first-child、:link、:vistited、:hover、:active、:focus 和 :lang 等 。 
其 中 有 一 组 伪 类 是 主流 浏览 器 都 支持 的 ， 就 是 超 链 接 的 伪 类 ， 包 括 :link、:vistited、:hover 
和 :active。 

伪 类 选择 器 定义 的 样式 经 常 应 用 在 标记 <a> 上 ， 它 表示 超 链 接 4 种 不 同 的 状态 ， 即 未 访问 
超 链 接 (link) 、 已 访问 超 链接 (visited) 、 鼠 标 停留 在 超 链接 上 (hover) 和 激活 超 链接 (active) 。 
需要 注意 的 是 ，<a> 标 记 可 以 只 具有 一 种 状态 〈:link) ， 也 可 以 同时 具有 两 种 或 三 种 状态 。 比 
如 说 ， 任 何 一 个 有 href 属性 的 <a> 标 记 ， 在 未 有 任何 操作 时 都 已 经 具备 了 :link 的 状态 ， 也 就 是 
满足 了 有 链接 属性 这 个 条 件 ， 如 果 访 问 过 的 <a> 标 记 ， 就 同时 会 具备 :link、visited 两 种 状态 ; 
把 鼠标 指针 移 到 访问 过 的 <a> 标 记 上 的 时 候 ，<a> 标 记 就 同时 具备 了 :link、visited、hover 三 种 
状态 。 示 例如 下 : 


a:link{color:#FF0000; text-decoration:none} 
a:visited{color:#00FF00; text-decoration:none} 
a:hover{color:#0000FF; text-decoration:underline} 
a:active{color:#FFOO0FF; text-decoration:underline} 


上 面 的 样式 表示 该 超 链 接 未 访问 时 颜色 为 红色 且 无 下 画 线 , 访问 后 是 绿色 且 无 下 画 
引线 ， 息 标 指针 放 在 超 链 接 上 为 蓝 色 且 有 下 画 线 ， 激 活 超 链 接 时 为 紫色 且 有 下 画 线 . 


【 例 9.16】 《实例 文件 : ch09\9.16.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 伪 类 </title> 

<style> 

a:link {color: red} /* 未 访问 的 链接 */ 
a:visited {color: green} /* 已 访问 的 链接 */ 
a:hover {color:blue} /* 鼠标 移动 到 链接 上 */ 
a:active {color: orange} /* 选 定 的 链接 */ 
</style> 

</head> 

<body> 

<a href=""> 链 接 到 本 页 </a> 

<a href="http://www.sohu.com"> 搜 狐 </a> 
</body> 

</html> 


在 下 11.0 中 浏览 效果 如 图 9-22 所 示 ， 将 鼠标 指针 停留 在 第 一 个 超 链接 上 时 ， 显 示 颜 色 为 
蓝 色 ， 另 一 个 是 访问 过 后 的 超 链接 ， 显 示 颜 色 为 绿色 。 
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图 9-22 伪 类 显示 


9.4.8 ”属性 选择 器 


前 面 在 使 用 CSS3 样式 对 HTML 标记 进行 修饰 时 ， 都 是 通过 HTML 标记 名 称 或 自 定义 名 
称 指向 具体 的 HTML 元 素 ， 进 而 控制 HTML 标记 样式 。 那 么 能 不 能 直接 通过 标记 属性 来 进行 
修饰 ， 而 不 通过 标记 名 称 或 自 定义 名 称 呢 ? 直接 使 用 属性 控制 HTML 标记 样式 的 选择 器 称 为 
属性 选择 器 。 

属性 选择 器 根据 某 个 属性 是 否 存在 属性 值 来 寻找 元 素 , 因此 能 够 实现 某 些 非 常 有 意思 和 强 
大 的 效果 。CSS2 标准 就 已 经 出 现 了 4 个 属性 选择 器 , 在 CSS3 标准 中 又 新 加 了 3 个 属性 选择 器 ， 
也 就 是 说 现在 的 CSS3 标准 共有 7 个 属性 选择 器 , 它们 共同 构成 了 CSS 功能 强大 的 标记 属性 过 

在 CSS3 标准 中 ， 常 见 的 属性 选择 器 如 表 9-1 所 示 。 


表 9-1 常见 属性 选择 器 
选择 匹配 EE 的 元 素 ， 且 该 元 素 定义 了 foo 属性。 注意 ，E 选择 器 可 以 省 略 ， 表 示 
选择 定义 了 foo 属性 的 任意 类 型 元 素 
选择 匹配 EE 的 元 素 ， 且 该 元 素 将 foo 属性 值 定义 为 “bar”。 注 意 ，E 选择 器 可 以 
省 略 ， 用 法 与 上 一 个 选择 器 类 似 
选择 匹配 EE 的 元 素 , 且 该 元 素 定义 了 foo 属性 , foo 属性 值 是 一 个 以 空格 符 分 隔 的 
列表 ， 其 中 一 个 列表 的 值 为 “bar”。 注 意 ，E 选择 符 可 以 省 略 ， 表 示 可 以 匹配 任 


属性 选择 器 格式 


El[lfoo] 


E[foo= "bar "] 


E[foo~= "bar "] 
意 类 型 的 元 素 
例如 , a[title~="b1"] 匹 配 <a title="bl b2 b3"></a>, 而 不 匹配 <a title="b2 b3 b5"></a> 
选择 匹配 卫 的 元 素 ， 且 该 元 素 定义 了 foo 属性 ，foo 属性 值 是 一 个 用 连 字符 〈-) 
分 隔 的 列表 ， 值 开头 的 字符 为 "en"。 

E[fool="en"] 


注意 ，E 选择 符 可 以 省 略 ， 表 示 可 以 匹配 任意 类 型 的 元 素 。 例 如 ，[lang|="en"] 匹 
配 <body lang="en-us"></body>， 而 不 是 匹配 <body lang="f-ag"></body> 
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( 续 表 ) 
属性 选择 器 格式 ”| 说 明 
选择 匹配 卫 的 元 素 ， 且 该 元 素 定义 了 foo 属性 ，foo 属性 值 包含 了 前 级 为 "bar" 的 
子 字符 串 。 注 意 ，E 选择 符 可 以 省 略 ， 表 示 可 以 匹配 任意 类 型 的 元 素 。 例 如 ， 
body[lang^="en"] 匹 配 <body lang="en-us"></body>， 而 不 匹配 <body lang="f-ag">< 


E[foo^="bar"] 


/body> 

选择 匹配 卫 的 元 素 ， 且 该 元 素 定义 了 foo 属性 ，foo 属性 值 包含 后 级 为 "bar" 的 子 
E[foo$="bar"] 字符 串 。 注 意 卫 选择 符 可 以 省 略 ， 表 示 可 以 匹配 任意 类 型 的 元 素 。 例 如 ， 
img[src$="jpg"] 匹 配 <img src="p.jpg">， 而 不 匹配 <img src="p.gif"> 

选择 匹配 EE 的 元 素 ， 且 该 元 素 定义 了 foo 属性 ，foo 属性 值 包含 "b" 的 子 字符 串 。 
E[foo*="bar"] 注意 ，E 选择 器 可 以 省 略 ， 表 示 可 以 匹配 任意 类 型 的 元 素 。 例 如 ，img[src$="jpg"] 
匹配 <img src="p.jpg/>， 而 不 匹配 <img src="p.gif'/> 


【 例 9.17】 《实例 文件 :ch09\9.17.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 属 性 选择 器 </title> 

<style> 

[align] {color:red} 

[align="left"] {font-size:20px;font-weight:bolder;} 
[lang^="en"] {color:blue;text-decoration:underline;} 
[src$="gif"] {border-width:S5px;boder-color:#ff9900} 
</style> 

</head> 

<body> 

<p align=center> 这 是 使 用 属性 定义 样式 </p> 

<p align=left> 这 是 使 用 属性 值 定义 样式 </p> 

<p lang="en-us"> 此 处 使 用 属性 值 前 缀 定义 样式 </p> 

<p> 下 面 使 用 了 属性 值 后 级 定义 样式 

<img src="2.gif" border="1"/> 

</body> 

</html> 


在 正 11.0 中 浏览 效果 如 图 9-23 所 示 , 可 以 看 到 第 一 段落 使 用 属性 align 定义 样式 , 其 字体 
颜色 为 红色 ;第 二 段落 使 用 属性 值 left 修饰 样式 ， 其 字体 颜色 为 红色 ， 大 小 为 20 像素 并 加 粗 
显示 ， 是 因为 该 段落 使 用 了 align 属性 ， 第 三 段落 字体 显示 为 蓝 色 ， 且 带 有 下 夯 线 ， 是 因为 属 
性 lang 的 值 前 缀 为 en;， 最 后 一 个 图 片 以 边框 样式 显示 ， 是 因为 属性 值 后 级 为 gif。 
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- 0O x 
名 D:\ 本 书 源 代码 code 迷 国外 搜索- 
| 怠 居 M 沪 反 吕 x 加 
闹 各 百度 一 下 , 你 宫 知 首 


这 是 使 用 属性 定义 样式 
这 是 使 用 属性 值 定义 样式 


此 处 使 前 级 定义 样 


Np 


图 9-23 属性 选择 器 显示 


9.4.9 ”结构 伪 类 选择 器 

结构 伪 类 选择 器 (Structural pseudo-classes) 是 CSS3 新 增 的 类 型 选择 器 。 顾 名 思 义 ， 结 构 
伪 类 就 是 利用 文档 结构 树 〈DOM) 实现 元 素 过 滤 。 也 就 是 说 ， 通 过 文档 结构 的 相互 关系 来 匹 
配 特 定 的 元 素 ， 从 而 减少 文档 内 对 class 属性 和 id 属性 的 定义 ， 使 得 文档 更 加 简洁 。 

在 CSS3 版 本 中 ， 新 增 结构 伪 类 选择 器 如 表 9-2 所 示 。 


表 9-2 新 增 结构 伪 类 选择 器 


选择 器 含义 

E:root 匹配 文档 的 根 元 素 ， 对 于 HTML 文档， 就 是 HIML 元 素 

E:nth-child(n) 匹配 其 父 元 素 的 第 n 个 子 元 素 ， 第 一 个 编号 为 1 

E:nth-last-child(n) 匹配 其 父 元 素 的 倒数 第 n 个 子 元 素 ， 第 一 个 编号 为 1 

E:nth-of-type(n) 与 :nth-child0 作 用 类 似 ， 但 是 仅 匹 配 使 用 同 种 标签 的 元 素 

E:nth-last-of-type(n) ”| 与 :nth-last-child() 作用 类 似 ， 但 是 仅 匹配 使 用 同 种 标签 的 元 素 

E:last-child 匹配 父 元 素 的 最 后 一 个 子 元 素 ， 等 同 于 :nth-last-child(1) 

E:first-of-type 匹配 父 元 素 下 使 用 同 种 标签 的 第 一 个 子 元 素 ， 等 同 于 :nth-of-type(1) 

E:last-of-type 匹配 父 元 素 下 使 用 同 种 标签 的 最 后 一 个 子 元 素 ， 等 同 于 :nth-last-of-type(1) 

E:only-child 匹配 父 元 素 下 仅 有 的 一 个 子 元 素 ， 等 同 于 :first-child:last-child 或 :nth-child(1): 
nth-last-child(1) 

E:only-of-type 匹配 父 元 素 下 使 用 同 种 标签 的 唯一 一 个 子 元 素 , 等 同 于 :first-of-type:last-of-type 
或 :nth-of-type(1):nth-last-of-type(1) 

E:empty 匹配 一 个 不 包含 任何 子 元 素 的 元 素 。 注 意 ， 文 本 节点 也 被 看 作 子 元 素 
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【 例 9.18】〔 实 例文 件 : ch09\9.18.html) 


<!DOCTYPE html> 
<html> 

<head><title> 结 构 伪 类 </title> 

<style> 

tr:nth-child(even){ 

background-color:#96FED1 

} 

tr:last-child{font-size:20px;} 

</style> 

</head> 

<body> 

<table border=1 width=80%> 

<th> 姓 名 </th><th> 编 号 </th><th> 性 别 </th> 

<tr><td> 刘 海松 </td><td>006</td><td> 男 </td></tr> 
<tr><td> 王 峰 </td><td>001</td><td> 女 </td></tr> 
<tr><td> 李 张力 </td><td>002</tqd><td> 男 </td></tr> 
<tr><td> 于 辉 </td><td>008</td><td> 男 </td></tr> 
<tr><td> 张 浩 </td><td>004</td><td> 女 </td></tr> 
<tr><td> 刘 永 权 </td><td>003</td><td> 男 </td></tr> 
</table> 

</body> 

</html> 


在 正 11.0 中 浏览 效果 如 图 9-24 所 示 ， 可 以 看 到 表格 中 奇数 行 显示 指定 颜色 ， 并 且 最 后 一 
行 字体 的 大 小 以 20 像素 显示 ， 其 原因 就 是 采用 了 结构 伪 类 选择 器 。 
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可 “DAVEA 有 fkodc 四 二 ” 吕 | eR PD: 

| en 

庆生 6 


王 名 En L232 
十 蜂 por 去 
于 和 [os 四 
刘 永 权 003 男 


图 9-24 结构 伪 类 选择 器 


9.4.10 ”UI 元 素 状态 伪 类 选择 器 


UI 元 素 状 态 伪 类 (The UI element states pseudo-classes) 也 是 CSS3 新 增 选 择 器 ， 其 中 UI 
即 User Interface (用户 界面 ) 的 简称 。UI 设计 则 是 指 对 软件 的 人 机 交互 、 操 作 逻 辑 、 界 面 美观 
的 整体 设计 。 好 的 UI 设计 不 仅 是 让 软件 变 得 有 个 性 有 品位 ， 还 要 让 软件 的 操作 变 得 舒适 、 简 
单 、 自 由 ， 充 分 体现 软件 的 定位 和 特点 。 

UI 元 素 的 状态 一 般 包 括 可 用 、 不 可 用 、 选 中 、 未 选中 、 获 取 焦 点 、 失 去 焦点 、 锁 定 、 待 
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机 等 。CSS3 定义 了 3 种 常用 的 状态 伪 类 选择 器 ， 详 细 说 明 如 表 9-3 所 示 。 
表 9-3 常用 的 状态 伪 类 选择 器 


选择 器 说 明 

E:enabled “| 选择 匹配 E 的 所 有 可 用 UI 元 素 。 注 意 ， 在 网 页 中 ，UI 元 素 一 般 是 指 包含 在 form 元 素 内 
的 表单 元 素 。 例 如 input:enabled 匹配 <form><input type=text/><input type=buttion 
disabled=disabled/></form> 代 码 中 的 文本 框 ， 而 不 匹配 代码 中 的 按钮 

E:disabled | 选择 匹配 三 的 所 有 不 可 用 元 素 ， 注 意 ， 在 网 页 中 ，UI 元 素 一 般 是 指 包 含 在 form 元 素 内 
的 表单 元 素 。 例 如 input:disabled 匹配 <form><input type=text/><input type=buttion 
disabled=disabled/></form> 代 码 中 的 按钮 ， 而 不 匹配 代码 中 的 文本 框 

E:checked “| 选择 匹配 EE 的 所 有 可 用 UI 元 素 。 注 意 ， 在 网 页 中 ，UI 元 素 一 般 是 指 包含 在 form 元 素 内 
的 表单 元 素 。 例 如 input:checked 匹配 <form><input type=checkbox/><input type=radio 
checked=checked/></form> 代 码 中 的 单 选 按钮 ， 但 不 匹配 该 代码 中 的 复 选 杠 


【 例 9.19】 《实例 文件 :ch09\9.19.html) 
<!DOCTYPE html> 


<html> 

<head> 
<title>UI 元 素 状态 伪 类 选择 器 </title> 
<style> 


input:enabled {border:1lpx dotted #666;background:#ff9900;} 
input:disabled {border:lpx dotted #999;background:#F2F2F2;} 
</style> 

</head> 

<body> 

<center> 

<h3 align=center> 用 户 登录 </h3> 

<form method="post" action=""> 

用 户 名 : <input type=text name=name><br> 

密 gnbsp; gnbsp; 码 : <input type=password name=pass disabled="disabled"><br> 
<input type=submit value= 提 交 > 

<input type=reset value= 重 置 > 

</form> 

<center> 

</body> 

</html> 


在 正 11.0 中 浏览 效果 如 图 9-25 所 示 ， 可 以 看 到 表格 中 可 用 的 表单 元 素 都 显示 为 浅黄 色 ， 
而 不 可 用 的 元 素 显示 为 灰色 。 
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图 9-25 UI 元 素 状 态 伪 类 选择 器 应 用 


9.5 选择 器 声明 


使 用 CSS 选择 器 可 以 控制 HIML 标记 样式 ， 其 中 每 个 选择 器 属性 可 以 一 次 声明 多 个 ， 即 
创建 多 个 CSS 属性 修饰 HTML 标记 。 实 际 上 也 可 以 将 选择 器 声明 多 个 ， 并 且 任 何 形式 的 选择 
器 (如 标记 选择 器 、class 类 别 选 择 器 、ID 选择 器 等 ) 都 是 合法 的 。 


9.5.1 集体 声明 


在 一 个 页 面 中 ， 有 时 需要 不 同 种 类 的 标记 样式 保持 一 致 ， 例 如 需要 <p> 标 记 和 <hl> 标 记 的 
字体 保持 一 致 ， 此 时 可 以 将 <p> 标 记 和 <hl> 标 记 共 同 使 用 类 选择 器 ， 除 此 之 外 还 可 以 使 用 集体 
声明 方法 。 集体 声明 就 是 在 声明 各 种 CSS 选择 器 时 ,如 果 某 些 选择 器 的 风格 是 完全 相同 的 或 者 
部 分 相同 ， 可 以 将 风格 相同 的 CSS 选择 器 同时 声明 。 


【 例 9.20】 (实例 文件 : ch09\9.20.html) 


<!DOCTYPE html> 
<html> 
<head> 
<title> 集 体 声明 </title> 
<style type="text/css"> 
hl1,h2,pf 
color:red; /* 设 置 字体 的 颜色 为 红色 */ 
font-size:20px; /* 设 置 字体 的 大 小 */ 
font-weight:bolder; /* 设 置 字体 的 粗细 */ 
} 
</style> 
</head> 
<body> 
<h1> 此 处 使 用 集体 声明 </h1> 
<h2> 此 处 使 用 集体 声明 </h2> 
<p> 此 处 使 用 集体 声明 </p> 
</body> 
</html> 
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在 正 11.0 中 浏览 效果 如 图 9-26 所 示 ， 可 以 看 到 网 页 上 标题 1、 标题 2 和 段落 都 以 红色 字 
体 加 粗 显 示 ， 并 且 大 小 为 20 像素 。 


二 “大 床 
@ 站 D:\5 书 源码 \codeW 图 ”搜索 . 

ls 集体 声明 x 

请 和 EE- 下 , 你 Bi 知道 


此 处 使 用 集体 声明 
此 处 使 用 集体 声明 


此 处 使 用 集体 声明 


图 9-26 集体 声明 显示 


9.5.2 ”多 重 府 套 声明 


在 CSS 控制 HTML 标记 样式 时 ， 还 可 以 使 用 层 层 递 进 的 方式 〈 即 嵌 套 方式 ) 对 指定 位 置 
的 HTML 标记 进行 修饰 ， 例 如 当 <p> 与 </p> 之 间 包 含 <a></a> 标 记 时 ， 就 可 以 使 用 这 种 方式 对 
HMTIL 标记 修饰 。 


【 例 9.21】 实例 文件 ，ch09\9.21.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 多 重 嵌 套 声明 </tit1le> 

<style> 

p{font-size:20px;} 

p a{color:red;font-size:30px;font-weight:bolder;} 
</style> 

</head> 

<body> 

<Pp> 这 是 一 个 多 重典 套 <a href=""> 测 试 </a></p> 
</body> 

</html> 


在 正 11.0 中 浏览 效果 如 图 9-27 所 示 ， 可 以 看 到 在 段落 中 超 链 接 显示 红色 字体 ， 大 小 为 30 
像素 ， 其 原因 是 使 用 了 媒 套 声明 。 
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遍 当 百度 一 下 ,你 就 知道 


这 是 一 个 多 重 嵌 套现 


图 9-27 多 重 榜 套 声明 


9.6 ”综合 实例 1 一 一 制作 五 彩 标 题 


使 用 CSS 可 以 给 网 页 标题 设置 不 同 的 字体 样式 ， 即 建立 一 个 CSS 规则 ， 将 样式 应 用 到 页 
面 中 出 现 的 所 有 <hl> 标 记 或 者 是 整个 站 点 〈 当 使 用 一 个 外 部 样式 表 的 时 候 ) 。 如 果 我 们 想 改变 
整个 站 点 上 所 有 出 现 <h1> 标 记 的 颜色 、 尺 寸 、 字 体 ， 则 只 需要 修改 一 些 CSS 规则 即 可 。 

具体 步骤 如 下 : 


mn 


[@ 则 分 析 需 求 。 


本 实例 要 求 简单 ， 首 先 使 用 标记 <h1> 创 建 一 个 标题 ， 然 后 使 用 CSS 样式 对 标题 进行 修饰 ， 
可 以 从 颜色 、 尺 寸 、 字 体 、 背 景 、 边 框 等 方面 入 手 。 


0 构建 HTML 页 面 。 


创建 HTML 页 面 ， 完 成 基本 框架 并 创建 标题 。 其 代码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 
<title> 五 彩 标题 </title> 
</head> 

<body> 

<body> 

<h1> 

<span class=c1> 美 </span> 
<span class=c2> 食 </span> 
<span class=c3> 介 </span> 
<span class=c4> 绍 </span></h1> 
</body> 

</html> 


在 正 11.0 中 浏览 效果 如 图 9-28 所 示 ， 可 以 看 到 标题 在 网 页 中 的 显示 没有 任何 修饰 。 
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La 国 使 用 内 放样 式 。 


如 果 要 对 标题 进行 修饰 ， 就 需要 添加 CSS (此 处 使 用 内 嵌 样 式 ) 。 在 <head> 标 记 中 添加 
CSS， 代 码 如 下 : 


<style> 
hi{} 
</style> 


此 时 没有 任何 变化 ， 只 是 在 代码 中 引入 了 <style> 标 记 。 


L 国 改变 颜色 、 字 体 和 尺寸 


添加 CSS 代码 ， 改 变 标题 样式 。 在 颜色 、 字 体 和 尺寸 上 面 对 其 样式 进行 设置 ， 代 码 如 下 : 


hi{ 

font-family:Arial, sans-serif; /* 设 置 文本 的 字体 样式 */ 
font-size:24px; /* 设 置 字 体 的 大 小 为 24px*/ 
color:#369; /* 设 置 字体 颜色 为 浅 蓝 色 */ 


在 正 11.0 中 浏览 效果 如 图 9-29 所 示 , 可 以 看 到 字体 大 小 为 24 像素 , 颜色 为 浅 蓝 色 , 字体 
为 Arial。 


- oO x - OO x 
间 D:\ 本 书 源 代码 \code 说 图 ”名 搜索. 划 。D:\ 本 书 源 代码 code\ 江 国 ”已 ， 搜 索 ... 
后 五 彩 标 是 x 上 后 五 和 标题 x 加 
凋 当 百 度 一 下 ， 你 就 知道 请 当 百 度 一 下 ,你 就 知道 
图 9-28 标题 显示 图 9-29 添加 文本 修饰 标记 

L@ 加 加 入 灰色 边框 。 
为 标题 添加 边框 ， 代 码 如 下 : 
padding-bottom: 4px; /* 设 置 边框 与 文字 的 距离 为 4px*/ 


border-bottom:2px solid #ccc; /* 设 置 边框 的 颜色 */ 


在 正 11.0 中 浏览 效果 如 图 9-30 所 示 ， 可 以 看 到 “美食 介绍 ”文字 下 面 添 加 一 个 边框 ， 边 
框 和 文字 距离 是 4 像素 。 
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06j 增加 背景 图 。 


使 用 CSS 样式 为 标记 <h1> 添 加 背景 图 片 ， 代 码 如 下 : 


background:url(01.jpg) repeat-x bottom;  /* 设 置 背 景 图 片 和 水 平平 铺 模式 */ 


在 下 11.0 中 浏览 效果 如 图 9-31 所 示 , 可 以 看 到 “美食 介绍 ”文字 下 面 添 加 一 个 背景 图 片 ， 
图 片 在 水 平 (X) 轴 方 向 进行 平 铺 。 


= 旧 X - OO 光 
间 “D:\ 本 书 源 代码 vcode\j 国 ”名 搜索. 智 ”D:\ 本 书 源 代码 \code 详 图 ~ 搜索. 
筷 五 彩 标题 x 导 五 彩 标题 x 四 
请 党 百度 一 下 ， 你 知 道 堵 当 百 度 一 下 ， 你 就 知道 


美食 介绍 姜 合 介绍 


图 9-30 ”添加 边框 样式 图 9-31 添加 背景 
四 到 定义 标题 宽度 。 


使 


CSS 属性 将 背景 图 变 小 ， 使 其 正好 符合 4 个 字体 的 宽度 ， 代 码 如 下 : 
width:120px; 


在 正 11.0 中 浏览 效果 如 图 9-32 所 示 ， 可 以 看 到 “美食 介绍 ”文字 下 面 背 景 图 缩短 ， 正 好 
和 字体 宽度 相同 。 


08 定义 字体 颜色 。 


在 CSS 样式 中 为 每 个 字 定义 颜色 ， 代 码 如 下 。 


et 

Color:#B3EE3A; /* 设 置 第 1 个 字 的 颜色 */ 
} 
SC 

color:#71C671; /* 设 置 第 2 个 字 的 颜色 */ 
} 
G3 

color:#00F5FF;  /* 设 置 第 3 个 字 的 颜色 */ 
} 
-C41{ 

color:#00EEO0O0; /* 设 置 第 4 个 字 的 颜色 */ 
， 
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在 正 11.0 中 浏览 效果 如 图 9-33 所 示 ， 可 以 看 到 每 个 字体 显示 不 同 的 颜色 ， 加 上 背景 色 共 
有 5 种 颜色 。 


- 0O x - 0 x 
疗 ” DA 本 书 源 代码 \code 浊 图 ”搜索 多 。“D:+\ 本 书 源 代码 vcode\i 国 ~ 搜索. 

碟 五 和 标题 x | 等 五彩 标 是 x 加 

文件 (F) 编辑 (E) 查看 (V) 收藏 夫 (A) 工具 (T) 帮助 (H) 文件 (F) 编辑 (和 查看 (V) 收藏 夫 (A) 工具 (T) 帮助 (H) 

请 当 百度- 下 ， 你 就 知道 请 各 百度 一 下 , 你 信 知 道 


羔 食 公 绍 姜 合 企 纪 


图 9-32 定义 宽度 图 9-33 ”定义 字体 颜色 


9.7 ”综合 实例 2 一 一 制作 新 闻 菜 单 


网 上 浏览 新 闻 ， 是 每 个 上 网 者 都 喜欢 做 的 事情 。 一 个 布局 合理 ， 样 式 美 观 大 方 的 新 闻 菜 单 
是 吸引 人 的 主要 途径 之 一 。 本 实例 使 用 CSS 控制 HTML 标记 创建 新 闻 菜 单 ， 具 体 步骤 如 下 : 


@ 国 分 析 需 求 。 


创建 一 个 新 闻 菜 单 需要 包含 两 个 部 分 : 一 个 是 父 菜单 ,用 来 表明 新 闻 类 别 ， 另 一 个 是 子 菜 
单 ， 介 绍 具体 的 新 闻 消 息 。 菜 单方 式 很 多 ， 可 以 用 <table> 创 建 ， 也 可 以 用 列表 创建 ， 同 样 也 可 
以 使 用 段落 <p> 创 建 。 本 实例 采用 <p> 标 记 结合 <div> 创 建 。 


I@ 分 析 局 部 和 整体 ， 构建 HTML 网 页 。 


一 个 新 闻 菜单 可 以 分 为 三 个 层次 : 新 闻 父 菜单 、 新 闻 焦 点 和 新 闻 子 菜单 ， 下 面 分 别 使 用 
div 创建 。 其 HTML 代码 如 下 : 


<!DOCTYPE html> 

<html > 

<head><title> 导 航 菜单 </title> 

</head> 

<body> 

<div class="big"> 

<h2> 时 事 热 点 </h2> 

<div class="up"> 

<a href="#">7 月 周 周 疏 房 团 报名 </a> 

</div> <div class="down"> 

<p>。50 万 买 下 两 居 会 员 优惠 全 世界 大 学 排名 工薪 阶层 留学 美国 </p> 
<p>。 家 电 | 买房 上 焦点 打 电话 送礼 楼 市 松动 百 余 项 目 打折 </p> 


HTJmL5+CSS3+TjQuery Jmobile+Bootstrap 开发 APP 从 入 门 到 精通 〈 视 频 教 学 版 ) 


<p>。 财 经 | 油价 大 跌 ”cPI 新 高 </p> 
</div> 
</div> 
</body> 
</html> 


在 正 11.0 中 的 显示 效果 如 图 9-34 所 示 ， 可 以 看 到 一 个 标题 、 一 个 超 链接 和 三 个 段落 以 普 
通 样式 显示 ， 其 布局 只 存在 上 下 层次 。 


1 
口 
x 


| 
司 “DA 书架 fode 中 国 ”C。 搜 索 - Pp: 
(8 Se * 辐 
文 作 (人 雪 沪 ( 下 看 (V) 收 吾 天 (A] 工 吴 T) 策 助 (H) 
部 全 百 本 一 下 ,093 四 


| 房 团 报 

。50 万 买 下 两 居 会 员 优 惠 全 世界 大 学 排名 工薪 阶层 留学 美国 
。 家 电 | 买房 上 焦点 打 电话 送礼 楼 市 松动 百 余 项 目 打折 
“财经 | 油价 大 跌 CPI 新 高 


图 9-34 无 CSS 标记 显示 
t@g 添加 CSS 代码 ， 修 饰 整体 样式 。 
对 于 HTML 页 面 ， 需 要 有 一 个 整体 样式 。 其 代码 如 下 : 


<style> 

*{/* 全 局 选择 器 */ 

padding:0px; 

margin:0px; 

body{ 

font-family: "宋体"; /* 设 置 文本 的 字体 样式 */ 
font-size:12px; /* 设 置 字体 的 大 小 */ 

} 

-bigf 

width:400px; /* 设 置 边框 的 宽度 */ 
border:#33CCCC 1px solid; /* 设 置 边框 的 颜色 为 浅 绿 色 */ 
| 

</style> 


在 正 11.0 中 的 显示 效果 如 图 9-35 所 示 , 可 以 看 到 全 局 层 会 以 边框 显示 , 宽度 为 400 像素 ， 
其 颜色 为 浅 绿色 ; 文档 内 容 中 字体 采用 宋体 , 大 小 为 12 像素 , 并 且 定义 内 容 和 层 之 间 空 障 为 0， 
层 和 层 之 间 空 隙 为 0。 
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想 ”D:\ 本 书 源 代码 \code 记 图 ”人 | 搜索 -… 只 
忆 导航 荣 音 x 加 
文件 (P) 编辑 (日 查看 V) 收 训 夫 (A) 工具 (帮助 (H) 
请 各 百度 一 下 ,你 就 知道 


0 失信 是 全 世界 大 学 排名 工 新 阶 导 轩 学 美国 
买房 上 焦点 打 电话 送礼 楼 市 松动 百 余 项 目 打折 
-半生 | 深谷 天 器 "0 并 强 


图 9-35 整体 样式 添加 
I@ 细 添加 CSS 代码 ， 修 饰 新 闻 父 菜单 。 


对 新 闻 父 类 菜单 进行 CSS 控制 。 其 代码 如 下 : 


h2{background-color:olive; /* 设 置 背 景 颜 色 */ 
display:block; /* 设 置 方 框 的 显示 方式 */ 
width:400px; /* 设 置 方 框 的 宽度 */ 
height:18px; /* 设 置 方 框 的 高 度 */ 
line-height:18px; /* 设 置 字体 的 行 高 */ 
font-size:14px;} /* 设 置 字体 的 大 小 */ 


在 正 11.0 中 的 显示 效果 如 图 9-36 所 示 ， 可 以 看 到 标题 “时 事 热 点 ”会 以 矩形 方 框 显 示 ， 
其 背景 色 为 橄榄 色 ， 字 体 大 小 为 14 像素 ， 行 高 为 18 像素 。 


加 添加 CSS 菜单 ， 修 饰 子 菜单 。 
.up{padding-bottom:5px; /* 设 置 下 边 距 的 大 小 */ 
text-align:center; ”/* 设 置 文本 居中 显示 */ 
} 
p{line-height:20px;}  /* 设 置 文本 的 行 高 */ 
在 正 11.0 中 的 显示 效果 如 图 9-37 所 示 ， 可 以 看 到 超 链接 “7 月 周 周 候 房 团 报名 ”居中 显 
示 ， 所 有 段落 之 间 间 阶 增 大 。 


| 站“Dx 本 书 源 代 玛 ode 间 国 -他 | 搜索 - DINE\code 记 图 ”上 扫 万 
EE” x* 癌 
号 及 荣 单 a 
EE 文件 (月 福 久 (查看 V】 收 芋 夫 A) 工具 其 助 (H) 
请 3 EE 下 , rn 年 


文件 (F) 编辑 (F) 查看 (V) 收藏 夫 (A) 工 屋 (T) 帮助 (H) 
请 沁 百 话 - 下 , 作 Sik 首 


优惠 全 世界 天 学 排名 工 痒 阶层 留学 美国 .50 万 买 下 两 中 会 员 优惠 全 世界 大 学 排名 工薪 阶层 留学 美国 
. 打 电话 送礼 楼 市 松动 百 余 项 目 打折 “ 家电 | 买房 上 焦点 打 电 话 送礼 楼 市 松动 百人 项 目 打折 
: 认 强人 CBI 新 高 .财经 | 计价 大 跌 CPI 新 高 


图 9-36 ”修饰 超级 链接 图 图 9-37 子 菜 单 样式 显示 
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t@@j 添加 CSS 菜单 ， 修 饰 超级 链接 。 
af /* 设 置 超级 链接 文字 的 样式 */ 
font-size:16px; 
font-weight:800; 
text-decoration:none; 
margin-top:5px; 
display:block;} 
a:hover{/* 设 置 鼠标 放置 超级 链接 文字 上 的 样式 */ 
Color:#FF0000; 


text-decoration:underline;} 


在 正 11.0 中 的 显示 效果 如 图 9-38 所 示 。 可 以 看 到 超 链 接 “7 月 


周 周 疏 房 团 报名 ”字体 变 


大 ， 加 粗 ， 并 且 无 下 画 线 显示 ， 将 鼠标 指针 放 在 此 超级 链接 上 ， 会 以 红色 字体 显示 ， 并 且 下 面 


带 有 下 画 线 。 


人 全 D:\ 本 书 源 ft 码 Ycode 六 图 ”人 搜索- 只 
|s ai 东单 “| 
文件 (F) 编 久 ( 查看 (V) 收藏 天 (A) 工具 (1) 帮助 (H) 


请 EE 下. 人 run 


* 50 万 买 下 两 居 
,家 电 
“财经 | 油价 大 跌 CPI 新 高 


图 9-38 超级 链接 修饰 显示 


9.8 专家 解 惑 


1. CSS 定义 字体 在 不 同 浏览 器 大 小 不 一 样 ? 


例如 使 用 font-size:14px 定义 的 宋体 文字 ， 在 下 下 实际 高 是 16 像素 ， 下 空白 是 3 像素 ， 
Firefox 浏览 器 下 实际 高 是 17 像素 、 上 空 1 像素 、 下 空 3 像素 。 其 解决 办 法 是 在 文字 定义 上 设 


置 line-height， 并 确保 所 有 文字 都 有 默认 的 line-height 值 。 


2. CSS 在 网 页 制作 中 一 般 有 4 种 方式 的 用 法 , 那么 具体 在 使 用 时 该 采用 哪 种 用 法 ? 
当 有 多 个 网 页 需要 用 到 的 CSS 时 ， 就 采用 外 链 CSS 文件 的 方式 ， 这 样 网 页 的 代码 将 大 大 
减少 ， 修 改 起 来 也 非常 方便 ;只 在 单个 网 页 中 使 用 的 CSS 时 ， 就 采用 文档 头 部 方式 ， 只 有 在 网 


页 一 、 两 个 地 方 用 到 的 CSS 时 ， 就 采用 行内 插入 方式 。 
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3. CSS 的 行内 样式 、 内 嵌 样 式 和 链接 样式 可 以 在 一 个 网 页 中 混用 吗 ? 

3 种 用 法 可 以 混用 且 不 会 造成 混乱 ， 这 也 是 它 为 什么 称 之 为 “ 层 琶 样式 表 ” 的 原因 。 
浏览 器 在 显示 网 页 时 是 这 样 处 理 的 : 先 检查 有 没有 行内 插入 式 CSS， 有 就 执行 了 ， 针 对 本 
句 的 其 他 CSS 就 不 去 管 它 了 ; 其 次 检查 内 藤 方 式 的 CSS， 有 就 执行 了 ; 在 前 两 者 都 没有 的 
情况 下 再 检查 外 链 文件 方式 的 CSS。 因 此 可 以 看 出 ，3 种 CSS 的 执行 优先 级 是 行内 样式 、 
内 嵌 样 式 、 链 接 样式 。 


te 


C 


第 10 章 CSS3 字 体 与 段落 属性 


(< 


常见 的 网 站 、 博 客 通常 使 用 文字 或 图 片 来 阐述 自己 的 观点 ， 其 中 文字 是 传递 信息 的 主要 手 
段 。 而 美观 大 方 的 网 站 或 博客 ， 需 要 使 用 CSS 样式 修饰 。 设 置 文本 样式 是 CSS 技术 的 基本 使 
命 ， 通 过 CSS 文本 标记 语言 ， 可 以 设置 文本 的 样式 和 粗细 等 。 


tt 


10.1 字体 属性 
一 个 杂乱 无 序 、 堆 砌 而 成 的 网 页 ， 会 使 人 产生 枯燥 无 味 、 望 而 止步 的 感觉 ， 而 一 个 美观 大 
方 的 网 页 ， 会 给 人 以 美 轮 美 负 、 流 连 忘 返 的 感觉 。 这 美观 大 方 的 效果 ， 都 是 使 用 CSS 字体 样式 
来 设置 的 。 通 过 对 本 节 内 容 的 学 习 ， 相 信 读 者 可 以 设计 出 令 人 流连 忘 返 的 网 页 。 


10.1.1 字体 font-family 


font-family 属性 用 于 指定 文字 字体 类 型 ， 如 宋体 、 黑 体 、 隶 书 、Times New Roman 等 ， 即 
在 网 页 中 展示 字体 不 同 的 形状 。 有 具体 的 语法 格式 如 下 : 


{font-family:name} 
{font-family:cursivelfantasylmonospace|serif|sans-serif} 


从 语法 格式 上 可 以 看 出 ，font-family 有 两 种 声明 方式 。 第 一 种 声明 方式 使 用 name 字体 名 
称 ， 按 优先 顺序 排列 ， 以 逗号 隔 开 ， 如 果 字 体 名 称 包 含 空 格 ， 则 应 使 用 引号 括 起 ;第 二 种 声明 
方式 使 用 所 列 出 的 字体 序列 名 称 ， 如 果 使 用 fantasy 序列 ， 将 提供 默认 字体 序列 。 在 CSS3 中 ， 
比较 常用 的 是 第 一 种 声明 方式 。 


【 例 10.1】“〈 实 例文 件 ， chl0\10.1.html) 


<!DOCTYPE html> 
<html> 

<head> 

<style type=text/css> 
p{font-family: 黑 体 } 
</style> 

</head> 
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<body> 

<p align=center> 天 行 健 ， 君子 以 自强 不 息 。 </p> 
</body> 

</html> 


在 正 11.0 中 浏览 效果 如 图 10-1 所 示 ， 可 以 看 到 文字 居中 并 以 黑体 显示 。 


- 0O x 
| 后 ”D+ 本 书 源 代码 wode 国 ”地 搜索- 
|s DA 本 书 漂 代码 \code\ 源 代 .， x | 了 
文件 (六 久 ( 豆 看 V) 收 意 夫 (A) 工具 (T) 天 动 (H) 
华宇 百度 一 下 ， 人 SI 草 


天 行 健 ， 君 子 应 自强 不 息 。 


图 10-1 字体 类 型 显示 


在 字体 显示 时 ， 如 果 指 定 一 种 特殊 字体 类 型 ， 而 在 浏览 器 或 操作 系统 中 该 类 型 不 能 正确 获 
取 ， 就 可 以 通过 font-family 预 设 多 找 字体 类 型 。font-family 属性 可 以 预 置 多 个 供 页 面 使 用 的 字 
体 类 型 ， 即 字体 类 型 序列 ， 其 中 每 种 字体 类 型 之 间 使 用 逗号 隔 开 。 如 果 前 面 的 字体 类 型 不 能 
正确 显示 ， 则 系统 将 自动 选择 后 一 种 字体 类 型 ， 依 次 类 推 。 

所 以 ,在 设计 页 面 时 一 定 要 考虑 字体 的 显示 问题 。 为 了 保证 页 面 达到 预计 的 效果 ， 最 好 提 
供 多 种 字体 类 型 ， 而 且 最 好 以 最 基本 的 字体 类 型 作为 最 后 一 个 ， 其 样式 设置 如 下 : 


Pp 

font-family: 华 文 彩云 , 黑体 , 宋体 

} 

当 font-family 属性 值 中 的 字体 类 型 由 多 个 字符 串 和 空格 组 成 时 (如 Times New Roman) ， 
该 值 就 需要 使 用 双 引 号 引起 来 。 

Pi 


font-family:"Times New Roman" 


} 
10.1.2 ”字号 font-size 


一 个 网 页 中 ， 标 题 通常 使 用 较 大 字体 显示 ， 用 于 吸引 人 注意 ， 小 字体 用 来 显示 正常 内 容 ， 
大 小 字体 结合 形成 的 网 页 ， 既 吸引 了 人 的 眼球 ， 又 提高 了 人 的 阅读 效率 。 

在 CSS3 新 规定 中 ， 通 常 使 用 font-size 设置 文字 大 小 。 其 语法 格式 如 下 : 

{font-size: 数 值 


linherit|xx-small|lx-smalllsmall |medium|large|x-large|lxx-largel|larger| 
smaller|length} 
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其 中 ， 通 过 数值 来 定义 字体 大 小 ， 例 如 用 font-size:10px 的 方式 定义 字体 大 小 为 10 像素 。 
此 外 ， 还 可 以 通过 其 他 属性 值 定 义 字 体 的 大 小 ， 各 属性 值 含义 如 表 10-1 所 示 。 


表 10-1 字号 属性 值 


属性 值 说 明 

xx-small ”| 绝对 字体 尺寸 。 根 据 对 象 字体 进行 调整 。 最 小 

x-small 绝对 字体 尺寸 。 根 据 对 象 字体 进行 调整 。 较 小 

small 绝对 字体 尺寸 。 根 据 对 象 字体 进行 调整 。 小 

medium 默认 值 。 绝 对 字体 尺寸 。 根 据 对 象 字体 进行 调整 。 正常 

large 绝对 字体 尺寸 。 根 据 对 象 字 体 进行 调整 。 大 

x-large 绝对 字体 尺寸 。 根 据 对 象 字体 进行 调整 。 较 大 

xx-large 绝对 字体 尺寸 。 根 据 对 象 字体 进行 调整 。 最 大 

larger 相对 字体 尺寸 。 相 对 于 父 对 象 中 字体 尺寸 进行 相对 增 大 。 使 用 成 比例 的 em 单位 计算 
smaller 相对 字体 尺寸 。 相 对 于 父 对 象 中 字体 尺寸 进行 相对 减 小 。 使 用 成 比例 的 em 单位 计算 
百分数 或 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 , 不 可 为 负 值 。 其 百分比 取 值 是 基于 父 对 
象 中 字体 的 尺寸 


length 


【 例 10.2】〔 实 例文 件 ，ch10\10.2.html) 


<!DOCTYPE html> 

<html> 

<body> 

<div style="font-size:10pt"> 上 级 标记 大 小 
<p style="font-size:small"> 小 </p> 
<p style="font-size:larger"> 大 </p> 
<p style="font-size:x-small"> 小 </p> 
<p style="font-size:x-larger"> 大 </p> 
<p style="font-size:50%"> 子 标记 </p> 
<p style="font-size:25pt"> 子 标记 </p> 
</div> 

</body> 

</html> 


在 正 11.0 中 浏览 效果 如 图 10-2 所 示 ， 可 以 看 到 网 页 中 的 文字 被 设置 成 不 同 的 大 小 ， 其 设 
置 方式 采用 了 绝对 数值 、 关 键 字 和 百分比 等 形式 。 
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J 口 xX 
站 ”DA 本 书 源 人 三 Ycode 汪 国 ~ 吕 疤 未 …- 
|s Dx 本 书 涯 代码 vcode\ 学 代 - x 了 
文件 (气息 ( 昌 天 看 (V) 收藏 交 (A) 工具 (各 动 (H) 
请 下 反 下, fr90 吾 


上 级 标记 大 小 
小 
大 


子 标记 


图 10-2 字体 大 小 显示 
在 上 面 例子 中 ，font-size 字体 大 小 为 50% 时 ， 其 比较 对 象 是 上 一 级 标签 中 的 10pt。 同 样 还 
可 以 使 用 inherit 值 ， 直 接 继承 上 级 标记 的 字体 大 小 ， 代 码 如 下 
<div style="font-size:50pt"> 上 级 标记 


<p style="font-size: inherit "> 继承 </p> 
</div> 


10.1.3 ”字体 风格 font-style 
font-style 通常 用 来 定义 字体 风格 , 即 字体 的 显示 样式 。 在 CSS3 新 规定 中 , 语法 格式 如 下 : 
font-style:normal|italic|oblique|inherit 
其 属性 值 有 4 个， 具体 含义 如 表 10-2 所 示 。 
表 10-2 字体 风格 属性 值 


显示 一 个 斜体 的 字体 样式 


italic 浏览 器 会 
oblique 会 显示 一 个 倾斜 的 字体 样式 
该 从 父 元 素 继承 字体 样式 


inherit 


【 例 10.3】〔 实 例文 件 : ch10\10.3.html) 


<!DOCTYPE html> 
<html> 
<body> 
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<p style="font-style:italic"> 梅 花香 自 苦寒 来 </p> 
<p style="font-style:normal"> 梅 花香 自 苦 寒 来 </p> 
<p style="font-style:oblique"> 梅 花香 自 苦寒 来 </p> 
</body> 

</html> 


在 正 11.0 中 浏览 效果 如 图 10-3 所 示 ， 可 以 看 到 文字 分 别 显示 不 同 的 样式 。 


- D x 
名 ”D:\ 本 书 源 代码 \code 详 轿 。” | 搜索 .… 
lis Dx\ 本 书 源 代码 vcode\ 源 代 . x | 
文件 (F) 编辑 E) 查看 (V) 收藏 夫 (A) 工具 (帮助 (H) 
堵 当 百 度 一 下 ， 你 名 知道 
旅 兴 天 请 背 装 严 
梅花 香 自 苦寒 来 
禾 珍 天 月 如 各 光 


图 10-3 字体 风格 显示 


10.1.4 加 粗 字体 font-weight 
通过 设置 字体 粗细 ， 可 以 让 文字 显示 不 同 的 外 观 。 通 过 CSS3 中 的 font-weight 属性 可 以 定 
义 字体 的 粗细 程度 ， 其 语法 格式 如 下 : 


{font-weight:100-900|boldlbolderllighter|lnormal;} 
font-weight 属性 有 13 个 属性 值 ， 分 别 是 bold、bolder、lighter、normal、100~900。 如 果 没 


有 设置 该 属性 ， 则 使 用 其 默认 值 normal。 属 性 值 设置 为 100-900,， 值 越 大 ,加 粗 的 程度 就 越 高 ， 
其 具体 含义 如 表 10-3 所 示 。 


表 10-3 ”加 粗 字 体 属性 值 


人 


bolder 定义 更 粗 的 字体 ， 相 对 值 
lighter | 定义 更 细 的 字体 ， 相 对 值 | 
normal | 默认 ， 标 准 字体 | 


浏览 器 默认 的 字体 粗细 是 400, 也 可 以 通过 参数 lighter 和 bolder 使 字体 在 原 有 基础 上 显得 
更 细 或 更 粗 。 
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【 例 10.4】 《实例 文件 : ch10\10.4.html) 
<!DOCTYPE html> 

<html> 

<body> 


<p 
< 
<Pp 
<p 
<P 
<P 
区 


style="font-weight:bold"> 学 习 雷 锋 好 榜样 bold) </p> 
style="font-weight:bolder"> 学 习 雷 锋 好 榜样 (bolder) </p> 
style="font-weight:1ighter"> 学 习 雷 锋 好 榜样 (lighter) </p> 
style="font-weight:normal"> 学 习 雷 锋 好 榜样 (normal) </p> 
style="font-weight:100"> 学 习 雷 锋 好 榜样 (100) </p> 
style="font-weight:400"> 学 习 雷 锋 好 榜样 (400) </p> 
style="font-weight :900"> 学 习 雷 锋 好 榜样 (900)</p> 


</body> 
</html> 


在 正 11.0 中 浏览 效果 如 图 10-4 所 示 ， 可 以 看 到 文字 以 不 同方 式 加 粗 ， 其 中 使 用 了 关键 字 
加 粗 和 数值 加 粗 。 


10.15 


- 0 x 
加 D:\ 丰 书 源 代码 \code 谤 图 - 中 | 搜索 
| Di:\ 书 漂 (t 码 \codeV 源 代 ， x | 
文件 (月 篇 凶 ( 日 ， 坦 看 (V) 收藏 去 (A) 工具 (T) 帮助 (H) 
雇 全 百度 一 下 ， 你 Sin 四 


学 习 雷 锋 好 榜样 (bold) 
学 习 雷 锋 好 榜样 (bolder) 
学 习 雷 锋 好 榜样 (1ighter) 
学 习 雷 锋 好 榜样 normal) 
学 习 雷 锋 好 榜样 (100) 
学 习 雷 锋 好 榜样 (400) 

学 习 雷 锋 好 榜样 (900) 


图 10-4 字体 粗细 显示 


小 写字 母 转 为 大 写字 母 font-variant 


font-variant 属性 设置 大 写字 母 的 字体 显示 文本 ,这 意味 着 所 有 的 小 写字 母 均 会 被 转换 为 大 
写 。 在 CSS3 中 ， 其 语法 格式 如 下 : 


{font-variant:normal|small-caps|inherit} 


font-variant 有 3 个 属性 值 ， 分 别 是 normal、 small-caps 和 inherit, 其 具体 含义 如 表 10-4 


所 示 。 
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表 10-4 各 属性 值 含义 


属性 值 说 明 


normal 默认 值 ， 浏 览 器 会 显示 一 个 标准 的 字体 


small-caps 浏览 器 会 显示 小 型 大 写字 母 的 字体 
inherit 规定 应 该 从 父 元 素 继承 font-variant 属性 的 值 


【 例 10.5】 实例 文件 ，ch10\10.5.html) 

<!DOCTYPE html> 

<html> 

<body> 

<p style="font-variant:normal">Happy BirthDay to You</p> 

<p style="font-variant:small-caps">Happy BirthDay to You</p> 
</body> 

</html> 


在 正 11.0 中 浏览 效果 如 图 10-5 所 示 ， 可 以 看 到 字母 以 大 写 形式 显示 。 

图 中 通过 对 两 个 属性 值 产生 的 效果 进行 比较 可 以 看 到 ， 设 置 为 normal 属性 值 的 文本 以 正 
常 文本 显示 ， 而 设置 为 small-caps 属性 值 的 文本 中 有 稍 大 的 大 写字 母 ， 也 有 小 的 大 写字 母 。 也 
就 是 说 ， 使 用 了 small-caps 属性 值 的 段落 文本 全 部 变 成 了 大 写 ， 只 是 大 写字 母 的 尺寸 不 同 。 


- 0 x 
着 ”DA\ 本 书 源 代码 \code 庄 图 ”| 搜索 .… 
局 D:\ 本 书 源 代码 \code\ 源 代 .x | 了 
文件 (F) 编辑 (E) 查看 (V) 收藏 夫 (A) 工具 (T) 帮助 (H) 
请 全 百 度 一 下 ， 你 跌 知 道 


Happy BirthDay to You 


HAaPPY BIRTHDAY TO YOU 


图 10-5 字母 大 小 写 转 换 


10.1.6 ”字体 复合 属性 font 


在 设计 网 页 时 ， 为 了 使 网 页 布局 合理 且 文 本 规范 ， 对 字体 设计 需要 使 用 多 种 属性 ， 如 定义 
字体 粗细 、 定 义 字体 大 小 等 。 但 是 多 个 属性 分 别 书写 相对 比较 麻烦 ，CSS3 样式 表 提 供 的 font 
属性 就 解决 了 这 一 问题 。 

font 属性 可 以 一 次 性 地 使 用 多 个 属性 的 属性 值 定义 文本 字体 ， 其 语法 格式 如 下 : 


{font:font-style font-variant font-weight font-size font-family} 
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font 属性 中 的 属性 排列 顺序 是 font-style、font-variant、 font-weight、 font-size 和 font-family， 
属性 的 属性 值 之 间 使 用 空格 隔 开 ， 但 是 如 果 font-family 属性 要 定义 多 个 属性 值 ， 则 需 使 用 喜 
“，” 隔 开 。 
属性 排列 中 ，font-style、font-variant 和 font-weight 这 3 个 属性 值 是 可 以 自由 调换 的 。 而 
font-size 和 font-family 则 必须 按照 固定 的 顺序 出 现 ， 如 果 这 两 个 的 顺序 不 对 或 缺少 一 个 ， 那 么 


整 条 样式 规则 可 能 因此 会 被 忽略 。 


【 例 10.6】 实例 文件 ，ch10\10.6.html) 
<!DOCTYPE html> 
<html> 
<head> 
<style type=text/css> 
pt{ 
font:normal small-caps bolder 20pt "Cambria", "Times New Roman" ,宋体 
} 
</style> 
</head> 
<body> 
<p> 读 书 和 学 习 是 在 别人 思想 和 知识 的 帮助 下 ， 建 立 起 自己 的 思想 和 知识 。</p> 
</body> 
</html> 


在 正 11.0 中 浏览 效果 如 图 10-6 所 示 ， 可 以 看 到 文字 被 设置 成 宋体 并 加 粗 。 


oO x 
CE TT 万 - 
|8 Ov=tmrnvodeunrc. < 
文件 人 F) 凡 加 (日 、 查 写 V) 收 匡 天 (A) 工 RD 三 护 (H) 
部 下 we 


读书 和 学 习 是 在 别人 思想 和 知识 的 帮 
助 下 ， 建 立 起 自己 的 思想 和 知识 。 


图 10-6 复合 属性 font 显示 


10.1.7 ”字体 颜色 color 


没有 色彩 的 网 页 是 枯燥 而 没有 生机 的 , 这 就 意味 着 一 个 优秀 的 网 页 设计 者 不 仅 要 能 够 合理 


安排 页 面 布 局 ， 而 且 还 要 具有 一 定 的 色彩 视觉 和 色彩 搭配 能 力 ， 这 样 才能 够 使 网 页 更 加 精美 ， 
具有 表现 力 ， 给 浏览 者 以 亲切 感 。 


在 CSS3 样式 中 ， 通 常 使 用 color 属性 来 定义 颜色 。 其 属性 值 通常 使 用 的 设置 域 如 表 10-5 


所 示 。 
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表 10-5 属性 值 设置 域 


属性 值 说 明 

color name | 规定 属性 值 为 颜色 名 称 的 颜色 (如 red) 

hex_number | 规定 属性 值 为 十 六 进 制 值 的 颜色 如 #ff0000) 

rgb_number | 规定 属性 值 为 rgb 代码 的 颜色 (如 rgb(255,0,0)) 

inherit 规定 应 该 从 父 元 素 继承 颜色 

hsl number | 规定 属性 值 为 HSL 代码 的 颜色 (如 hsl(0,75%,50%)) ， 此 为 CSS3 新 增加 的 颜色 表现 方 
式 


规定 属性 值 为 HSLA 代码 的 颜色 (如 hsla(120,50%,50%,1))， 此 为 CSS3 新 增加 的 颜色 
表现 方式 


rgba_number | 规定 属性 值 为 RGBA 代码 的 颜色 〈 如 rgba(125.10.45,0.3)) ， 此 为 CSS3 新 增加 的 颜色 
表现 方式 


【 例 10.7】 实例 文件 : ch10\10.7.html) 
<!DOCTYPE html> 


<html> 

<head> 

<style type="text/css"> 

body{color:red} /* 设 置 body 标 记 的 颜色 */ 
hlfcolor:#00ff00} /* 设 置 h1 标 记 的 颜色 */ 
Pp.exfcolor:rgb(0,0,255)} /* 设 置 组 合 选择 器 p .ex 的 颜色 */ 
p.hs{color:hsl (0,75%,50%)} /* 设 置 组 合 选 择 器 p .hs 的 颜色 */ 


p.ha{color:hsla(120,50%,50%,1)} /* 设 置 组 合 选择 器 p .ha 的 颜色 */ 

p.rafcolor:rgba(125,10,45,0.5)} /* 设 置 组 合 选择 器 p .ra 的 颜色 */ 

</style> 

</head> 

<body> 

<h1> 这 是 标题 1</h1> 

<p> 这 是 一 段 普通 的 段落 。 请 注意 ， 该 段落 的 文本 是 红色 的 。 在 body 选择 器 中 定义 了 本 页 面 中 的 
默认 文本 颜色 。</p> 

<p class="ex"> 该 段落 定义 了 class="ex"。 该 段落 中 的 文本 是 蓝 色 的 。</p> 

<p class="hs"> 此 处 使 用 了 css3 中 的 新 增加 的 HSL 函 数 ， 构 建 颜色 。</p> 

<p class="ha"> 此 处 使 用 了 css3 中 的 新 增加 的 HSLA 函 数 ， 构 建 颜色 。</p> 

<p class="ra"> 此 处 使 用 了 css3 中 的 新 增加 的 RGBA 函 数 ， 构 建 颜色 。</p> 

</body> 

</html> 


在 下 11.0 中 浏览 效果 如 图 10-7 所 示 ， 可 以 看 到 文字 以 不 同 颜色 显示 ， 并 采用 了 不 同 的 颜 
色 取 值 方式 。 
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@ 外 DA 不 书 天 三 Yode\ 图 ”中 | 要 未- DP- 
SB OSH8ta\ode\Bt x I 

文 q( 本 生日 喜 看 NM 以 十 天 (A 工具 (其 动 H) 

将 EE- 下 , HX 


这 是 标题 1 
- 段 普通 的 段落 。 请 注意 ， 总 你 丙 四 因 个 居 全 人 在 body 
过 撞 姑 下 多 归 而 中 尖 训 认 文本 颜色 
该 段落 定义 了 class=“ex"。 该 段落 中 的 文本 是 蓝 色 的 。 
此 处 使 用 了 Css3 中 的 新 增加 的 HSL 函 数 ， 构 建 颜 色 。 
此 处 使 用 了 CSS3 中 的 新 增加 的 HSLA 函 数 ， 构 建 颜 色 。 
| 中 的 曾 放 JRGBA 函 数 ， 构 建 颜 人 


图 10-7 color 属性 显示 


在 本 实例 中 ， 使 用 了 3 个 CSS3 中 新 增加 的 表现 形式 ， 分别 是 HSL ( ) 、HSLA 和 
本 RGBA ( ) ， 这 3 个 函数 在 Firefox 浏览 器 中 支持 ， 但 正 浏 览 器 尚 不 支持 。 


10.2 文本 高 级 样式 


对 于 一 些 有 特殊 要 求 的 文本 (如 文字 存在 阴影 ,字体 种 类 会 发 生变 化 。 如 果 再 使 用 上 面 
所 介绍 的 CSS 样式 进行 定义 ， 其 结果 就 不 会 得 到 正确 显示 ， 这 时 就 需要 一 些 特定 的 CSS 标记 
来 完成 这 些 要 求 。 


10.2.1 阴影 文本 text-shadow 


在 显示 字体 时 ， 有 时 根据 要 求 需要 给 文字 添加 阴影 效果 并 为 文字 阴影 添加 颜色 ， 以 增强 网 
页 整体 表现 力 ， 这 时 就 需要 用 到 CSS3 样式 中 的 text-shadow 属性 。 实 际 上 在 CSS 2 中 ，W3C 
就 已 经 定义 了 text-shadow 属性 ， 只 是 CSS3 又 重新 定义 了 它 ， 并 为 其 增加 了 不 透明 度 效果 。 

text-shadow 属性 有 4 个 属性 值 ， 最 后 两 个 是 可 选 的 ， 第 一 个 属性 值 表示 阴影 的 水 平 位 移 ， 
可 取 正 负 值 ; 第 二 个 属性 值 表示 阴影 垂直 位 移 , 可 取 正 负 值 ; 第 三 个 属性 值 表示 阴影 模糊 半径 ， 
不 可 为 负 值 ， 该 值 可 选 ， 第 4 个 个 属性 值 表示 阴影 颜色 值 ， 该 值 可 选 。 语 法 格式 如 下 : 


text-shadow: length length opacity color 


【 例 10.8】〔 实 例文 件 ，ch10\10.8.html) 

<!DOCTYPE html> 

<html> 

<body> 

<p align=center style="text-shadow:0.lem 2px 6px blue;font-size:80px;"> 
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这 是 TextShadow 的 阴影 效果 </p> 
</body> 
</html> 


在 下 11.0 中 浏览 效果 如 图 10-8 所 示 ， 可 以 看 到 文字 居中 并 带 有 阴影 显示 。 


这 是 TextShadow 
的 阴影 效果 


图 10-8 ”阴影 显示 结果 图 


通过 上 面 的 实例 ， 可 以 看 出 阴影 偏 移 由 两 个 length 值 调整 文本 阴影 的 位 移 。 第 一 个 length 
值 指定 到 文本 右边 的 水 平 距离 ， 负 值 会 把 阴影 放置 在 文本 左边 ; 第 二 个 length 值 指定 到 文本 下 
边 的 垂直 距离 ， 负 值 会 把 阴影 放置 在 文本 上 方 。 在 阴影 偏 移 之 后 ， 可 以 指定 一 个 模糊 半径 。 


模 焰 半 径 是 一 个 长 度 值 ， 它 支持 了 模糊 效果 的 范围 ， 但 如 何 计算 效果 的 具体 算法 并 
有 没有 指定 。 在 阴影 效果 的 长 度 值 之 前 或 之 后 ， 还 可 以 指定 一 个 颜色 值 。 颜 色 值 会 被 
用 作 胃 影 效果 的 基础 ， 如 果 没 有 指定 颜色 ， 那 么 将 使 用 文本 颜色 来 替代 。 


10.2.2 ”溢出 文本 text-overflow 


在 网 页 显示 信息 时 ， 如 果 指 定 显示 区 域 宽度 ， 而 显示 信息 过 长 ， 其 结果 就 是 信息 会 撑 破 指 
定 的 信息 区 域 ， 进 而 破坏 整个 网 页 布局 。 如 果 设 置 的 信息 显示 区 域 过 长 ， 就 会 影响 整体 网 页 显 
示 。 以 前 ， 我 们 遇 到 这 样 的 情况 ， 通 常 使 用 JavaScript 将 超出 的 信息 进行 省 略 。 现 在 ， 只 需要 
使 用 CSS3 新 增 的 text-overflow 属性 ， 就 可 以 解决 这 个 问题 。 

text-overflow 属性 用 来 定义 当 文 本 溢出 时 是 否 显示 省 略 标记 , 即 定义 省 略 文本 的 显示 方式 ， 
并 不 具备 其 他 的 样式 属性 定义 。 要 实现 溢出 时 产生 省 略 号 的 效果 还 须 定 义 强制 文本 在 一 行内 显 
示 (white-space:nowrap ) 及 溢出 内 容 为 隐藏 (overflow:hidden) ， 只 有 这 样 才能 实现 溢出 文本 
显示 省 略 号 的 效果 。 

text-overflow 语法 如 下 : 


text-overflow: cliplellipsis 


其 属性 值 含义 如 表 10-6 所 示 。 
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表 10-6 溢出 文本 属性 值 


属性 值 说 明 


clip 不 显示 省 略 标记 〈.…) ， 而 是 简单 的 裁 切 条 


ellipsis 当 对 象 内 文本 溢出 时 显示 省 略 标记 (...) 


这 里 需要 特别 说 明 的 是 ，text-overflow 属性 非常 特殊 ， 当 设置 的 属性 值 不 同时 ， 其 

2 浏览 器 对 text-overflow 属性 支持 也 不 相同 。 当 text-overflow 属性 值 是 clip 时 , 现在 
主流 的 浏览 器 都 支持 ,如 果 text-overflow 属性 是 ellipsis 时 , 除了 Firefox 5.0 浏览 器 
暂 不 支持 ， 其 他 主流 浏览 器 都 支持 。 


【 例 10.9】〔 实 例文 件 : ch10\10.9.html) 


<!DOCTYPE html> 
<html> 
<body> 
<style type="text/css"> 
.test demo clip{text-overflow:clip; overflow:hidden; white-space:nowrap; 
width:200px; background:#ccc;} 
.test demo ellipsis{text-overflow:ellipsis;overflow:hidden;white-space: 
nowrap;width:200px;background:#ccc;} 
</style> 
<h2>text-overflow:clip</h2> 
<div class="test demo clip"> 
不 显示 省 略 标记 ， 而 是 简单 的 裁 切 条 
</div> 
<h2>text-overflow:ellipsis</h2> 
<div class="test demo ellipsis"> 
显示 省 略 标记 ， 不 是 简单 的 裁 切 条 
</div> 
</body> 
</html> 


在 下 11.0 中 浏览 效果 如 图 10-9 所 示 ， 可 以 看 到 文字 在 指定 位 置 被 裁 切 ，ellipsis 属性 以 省 
略 号 形式 出 现 。 


- 0O x 
各 file:///D:/ 本 书 源 代码 / 图 ”CG 搜索- 
|§ DA 二 fcodev5 代 - x | 
次 省 百度- 下 ， 你 忆 和 0 道 


text-overflow:clip 
不 显示 省 略 标记 ， 而 是 简单 和 
text-overflow:ellipsis 


显示 省 略 标记 ， 不 是 简单 … 


图 10-9 文本 省 略 处 理 
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10.2.3 ”控制 换行 word-wrap 


当 在 一 个 指定 区 域 显示 一 整 行文 字 时 ， 如 果 文 字 在 一 行 显示 不 完 时 ， 则 需要 进行 换行 ， 如 
果 不 进行 换行 ， 则 会 超出 指定 区 域 范围 。 此 时 我 们 可 以 采用 CSS3 中 新 增加 的 word-wrap 文本 
样式 来 控制 文本 换行 。 

word-wrap 语法 格式 如 下 : 


word-wrap: normal1break-word 


其 属性 值 含义 比较 简单 ， 如 表 10-7 所 示 。 


表 10-7 ”控制 换行 属性 值 


允许 内 容 项 开 指定 的 边界 


break-word 内 容 将 在 边界 内 换行 。 如 果 需 要 ， 词 内 换行 (word-break) 也 会 发 生 


【 例 10.10】 《实例 文件 ，chl10\10.10.html) 


<!DOCTYPE html> 

<html> 

<head> 

<style type="text/css"> 

div{width:300px;word-wrap:break-word;border:1lpx solid #999999;} 

</style> 

</head> 

<body> 

<div>wordwrapbreakwordwordwrapbreakwordwordwrapbreakwordwordwrapbreakwo 
rd</div> 

es 

<div> 全 中 文 的 情况 ， 全 中 文 的 情况 ， 全 中 文 的 情况 全 中 文 的 情况 全 中 文 的 情况 </div><br /> 

<div>This is all English,This is all English,This is all English,This is 
all English</div> 

</body> 

</html> 


在 正 11.0 中 浏览 效果 如 图 10-10 所 示 ， 可 以 看 到 文字 在 指定 位 置 被 控制 换行 。 


| 口 We 
各 DD:\ 本 书 源 代码 \code 烛 畦 ”已 搜索 

大 ”DY 证 书 浑 代码 vcode\ 浑 代 … x | 

请 基 百 导 一下， 你 就 知 和 


ordwrapbreakwordwordwrapbreakwordwor 
dwrapbreakwordwordwrapbreakword 


在 四 文 的 傅 帝 ， 人 至 中文 的 傅 帝 ， 公 中文 的 
情况 全 中 文 的 情况 全 中 文 的 情况 


This is all ish, This is all 
nglish, This is all English, This is 
11 English 


图 10-10 文本 强制 换行 
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可 以 看 出 ，word-wrap 属性 可 以 控制 换行 ， 当 属性 取 值 break-word 时 将 强制 换行 。 中 文 文 
本 没有 任何 问题 ， 英 文 语 句 也 没有 任何 问题 ， 但 是 对 于 长 的 英文 字符 串 就 不 起 作用 ， 也 就 是 说 
break-word 属性 只 控制 是 否 断 词 ， 而 不 是 断 字符 。 


10.2.4 保持 字体 尺寸 不 变 font-size-adjust 

有 时 候 在 同一 行 的 文字 , 由 于 所 采用 字体 类 型 或 修饰 样式 不 同 , 而 导致 其 字体 尺寸 不 一 样 ， 
整 行文 字 看 起 来 就 显得 很 杂乱 ， 此 时 需要 CSS3 属性 font-size-adjust 来 处 理 。 

font-size-adjust 用 来 定义 整个 字体 序列 中 所 有 字体 的 大 小 是 否 保持 同一 个 尺寸 。 其 语法 格 
式 如 下 : 


font-size-adjust:none|lnumber 


其 属性 值 含义 如 表 10-8 所 示 。 
表 10-8 保持 字体 尺寸 不 变 属性 值 


默认 值 ， 允 许字 体 序列 中 每 一 字体 遵守 它 自己 的 尺寸 
为 字体 序列 中 所 有 字体 强迫 指定 同一 尺寸 


【 例 10.11】〔 实 例文 件 ，ch10\10.11 html) 


<!DOCTYPE html> 

<html> 

<head> 

<style> 

.big{font-family:sans-serif;font-size:40pt;} 
.a{font-family:sans-serif;font-size:15pt;font-size-adjust:1;} 
.b{font-family:sans-serif;font-size:30pt;font-size-adjust:0.5;} 
</style> 

</head> 

<body> 

<p class="big"><span class="b"> 闻 鸡 起 舞 </span></p> 

<p class="big"><span class="a"> 闻 鸡 起 舞 </span></p> 

</body> 

</html> 


在 正 11.0 中 浏览 效果 如 图 10-11 所 示 ， 可 以 看 到 同一 行 的 字体 大 小 相同 。 
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- oO x 
| DBvodeY ~ | 的 二- 
|€ D3Rcode\Rt. 

请 EE- 下 . fot 并 


闻 鸡 起 舞 | 


闻 鸡 起 舞 


图 10-11 尺寸 一 致 显示 


10.3 ”段落 属性 
网 页 由 文字 组 成 ， 而 用 来 表达 同一 个 意思 的 多 个 文字 组 合 则 称 为 段落 ,段落 是 文章 的 基本 
单位 ， 同 样 也 是 网 页 的 基本 单位 。 段 落 的 放置 与 效果 的 显示 会 直接 影响 到 页 面 的 布局 及 风格 。 
CSS 样式 表 提 供 了 文本 属性 来 实现 对 页 面 中 段落 文本 的 控制 。 


10.3.1 单词 间隔 word-spacing 


单词 之 间 的 间隔 如 果 设 置 合理 , 一 是 会 给 整个 网 页 布局 节省 空间 ,二 是 可 以 给 人 赏心悦目 
的 感觉 ， 提 高 用 户 的 阅读 效率 。 在 CSS3 中 ， 可 以 使 用 word-spacing 直接 定义 指定 区 域 或 段落 
中 字符 之 间 的 间隔 。 

word-spacing 属性 用 于 设置 词 与 词 之 间 的 间距 。 其 语法 格式 如 下 : 


word-spacing:normal|length 
其 中 属性 值 normal 和 length 含义 如 表 10-9 所 示 。 
表 10-9 单词 间隔 属性 值 


normal 默认 ， 定 义 单词 之 间 的 标准 间隔 


length 定义 单词 之 问 的 固定 间隔 ， 可 以 接受 正信 或 负 值 | 


【 例 10.12】 实例 文件 ，ch10\10.12.html) 

<!DOCTYPE html> 

<html> 

<body> 

<p style="word-spacing:normal">Welcome to my home</p> 
<p style="word-spacing:15px">Welcome to my home</p> 
<p style="word-spacing:15px"> 欢 迎 来 中 国旅 游 </p> 

</body> 
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</html> 


在 正 11.0 中 浏览 效果 如 图 10-12 所 示 ， 可 以 看 到 段落 中 单词 以 不 同 间隔 显示 。 


-= 
( 各 Di 本 Hode 国 -他 | 搜索 - 
| § px 本 书 这 fcode 尖 人. x | 下 
音 六 百度 下 . WUN 者 


Welcome to my home 
Welcome to my home 


欢迎 来 中 国旅 游 


图 10-12 设置 词 间 隔 显 示 
从 上 面 显示 结果 可 以 看 出 ，word-spacing 属性 不 能 用 于 设置 文字 之 间 的 间隔 。 


10.3.2 ”字符 间隔 letter-spacing 

在 一 个 网 页 中 , 还 可 能 涉及 多 个 字符 文本 ,将 字符 文本 之 间 的 间距 设置 和 词 间隔 保持 一 致 ， 
进而 保持 页 面 的 整体 性 是 网 页 设计 者 必须 完成 的 。 词 与 词 之 间 可 以 通过 word-spacing 进行 设置 ， 
那么 字符 之 间 使 用 什么 设置 呢 ? 

在 CSS3 中 ， 可 以 通过 letter-spacing 来 设置 字符 文本 之 间 的 距离 ， 这 里 允许 使 用 负 值 ， 这 
可 让 字符 之 间 更 加 紧凑 。 其 语法 格式 如 下 : 

letter-spacing:normal|length 


其 属性 值 含义 如 表 10-10 所 示 。 


表 10-10 ”字符 间隔 属性 值 


默认 间隔 ， 即 以 字符 之 间 的 标准 间隔 显示 
length 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 ， 允 许 为 负 值 


【 例 10.13】《 实 例文 件 : ch10\10.13.html) 


<!DOCTYPE html> 

<html> 

<body> 

<p style="letter-spacing:normal">Welcome to my home</p> 
<p style="letter-spacing:5px">Welcome to my home</p> 
<p style="letter-spacing:1lex"> 这 里 的 字 间 距 是 lex</p> 

<p style="letter-spacing:-lex"> 这 里 的 字 间 距 是 -lex</p> 

<p style="letter-spacing:1lem"> 这 里 的 字 间 距 是 lem</p> 


HTJmL5+CSS3+TjQuery Jmobile+Bootstrap 开发 APP 从 入 门 到 精通 〈 视 频 教 学 版 ) 


</body> 
</html> 


在 正 11.0 中 浏览 效果 如 图 10-13 所 示 ， 可 以 看 到 文字 间距 以 不 同 大 小 显示 。 


- oO x 
上 DANcode 国 - O|| 近 - 

© DF ode dnt 

育 $5E- 下 , GAU 


Welcome to my home 
Welcome to my home 
这 里 的 字 间 距 是 lex 

) 淹 全 可 于 


这 里 的 字 间 距 是 1 en 


图 10-13” 字 间距 效果 


从 上 述 代码 中 可 以 看 出 ， 通 过 letter-spacing 定义 了 多 个 字 间 距 的 效果 。 特 别 注意 ， 
CT 当 设置 的 字 间 距 为 负 值 时 ， 所 有 文字 就 会 粘 到 一 块 。 


10.3.3 ”文字 修饰 text-decoration 
在 网 页 文本 编辑 中 有 的 文字 需要 突出 重点 ， 告 诉 读者 这 段 文本 很 重要 ， 往 往 会 给 文字 增加 
下 画 线 ， 上 画 线 或 删除 线 效果 ， 从 而 吸引 读者 的 眼球 。 在 CSS3 中 ，text-decoration 属性 是 文本 
修饰 属性 ， 该 属性 可 以 为 页 面 提供 多 种 文本 的 修饰 效果 ， 如 下 画 线 、 删 除 线 、 闪 烁 等 。 
text-decoration 属性 语法 格式 如 下 : 


text-decoration:nonelunderlinel|blinkloverlinel|line-through 


其 属性 值 含义 如 表 10-11 所 示 。 


表 10-11 文字 修饰 属性 值 


默认 值 ， 对 文本 不 进行 任何 修饰 
underline | 下 画 线 


none 


overline | 上 画 线 
line-through | 删除 线 
blink 


【 例 10.14】〔 实 例文 件 ，ch10\10.14.html) 
<!DOCTYPE html> 
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<html> 
<body> 
<p style="text-decoration:none"> 人 总 是 在 接近 幸福 时 倍 感 幸福 ! </p> 
<p style="text-decoration:underline"> 人 总 是 在 接近 幸福 时 倍 感 幸福 ! </p> 
<p style="text-decoration:overline"> 人 总 是 在 接近 幸福 时 倍 感 幸福 ! </p> 
<p style="text-decoration:line-through"> 人 总 是 在 接近 幸福 时 倍 感 幸福 ! </p> 
<p style="text-decoration:blink"> 人 总 是 在 接近 幸福 时 倍 感 幸福 ! </p> 
</body> 
</html> 


在 正 11.0 中 显示 效果 如 图 10-14 所 示 ， 可 以 看 到 段落 中 出 现 了 下 画 线 、 上 画 线 和 删除 线 。 


- 0 x 
个”D:\ 本 书 源 代码 \code 泊 图 ”| 搜索 .… 

夸 ”D:\ 本 书 源 代码 \code\ 源 代 … x | 

次 当 百 度 一 下 ,你 就 知道 


人 总 是 在 接近 幸福 时 倍 感 幸福 ! 


总 是 在 接近 幸福 时 信 感 地 福 ! 


人 总 是 在 接近 幸福 时 倍 感 幸福 ! 


图 10-14 文本 修饰 显示 


小 | 这 里 需要 注意 的 是 ，blink 闪烁 效果 只 有 少数 浏览 器 支持 ， 而 他 等 其 他 大 多 数 浏览 
本 下 器 (如 Opera) 都 暂 不 支持 该 效果 。 


10.3.4 ”垂直 对 齐 方式 vertial-align 


在 网 页 文本 编辑 中 ， 对 齐 有 很 多 方式 ， 文 字 排 在 一 行 的 中 央 位 置 称 为 居中 对 齐 ， 文 章 的 标 
题 和 表格 中 数据 一 般 都 居中 排列 。 有 时 还 要 求 文字 垂直 对 齐 ， 即 文字 顶部 对 齐 或 底部 对 齐 。 
在 CSS 中 , 可 以 直接 使 用 vertical-align 属性 来 定义 ， 该 属性 用 来 设置 垂直 对 齐 方式 。 该 属 
性 定义 行内 元 素 的 基线 相对 于 该 元 素 所 在 行 的 基线 的 垂直 对 齐 。 人 允许 指定 负 长 度 值 和 百分比 
值 ， 这 会 使 元 素 降低 而 不 是 升 高 。 在 表格 中 ， 这 个 属性 可 以 用 来 设置 单元 格 内 容 的 对 齐 方式 。 
vertical-align 属性 语法 格式 如 下 : 


{vertical-align: 属 性 值 } 
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vertical-align 属性 值 如 表 10-12 所 示 。 


表 10-12 垂直 对 齐 方式 属性 值 


属性 值 说 明 

baseline 默认 ， 元 素 放置 在 父 元 素 的 基线 上 

sub 垂直 对 齐 文本 的 下 标 

super 垂直 对 齐 文本 的 上 标 

Top 把 元 素 的 顶端 与 行 中 最 高 元 素 的 顶端 对 齐 
text-top 把 元 素 的 顶端 与 父 元 素 字 体 的 顶端 对 齐 
middle 把 此 元 素 放置 在 父 元 素 的 中 部 

bottom 把 元 素 的 顶端 与 行 中 最 低 的 元 素 的 顶端 对 齐 
text-bottom ”| 把 元 素 的 底 端 与 父 元 素 字体 的 底 端 对 齐 
length 设置 元 素 的 堆 辣 顺序 

% 使 用 "line-height” 属性 的 百分比 值 来 排列 此 元 素 。 人 允许 使 用 负 值 


【 例 10.15】 《实例 文件 ， chl10\10.15.html) 


<!DOCTYPE html> 
<html> 
<body> 
<p> 世 界 杯 <b style="font-size:8pt;vertical-align:super">2018</b>! 
中 国 队 <b style="font-size:8pt;vertical-align:sub">[ 注 ] </b>! 
加 油 ! <img src="1.gif" style="vertical-align:baseline"></p> 
<p><img src="2.gif" style="vertical-align:middle"/> 
世界 杯 ! 中 国 队 ! 加 油 ! <img src="1.gif" style="vertical-align:top"> 
</p><hr> 
<p><img src="2.gif" style="vertical-align:middle"/> 
世界 杯 ! 中 国 队 ! 加 油 ! <img src="1.gif" style="vertical-align:text-top"> 
</p> 
<p><img src="2.gif" style="vertical-align:middle"/> 
世界 杯 ! 中 国 队 ! 加 油 ! <img src="1.gif" style="vertical-align:bottom"> 
x/p> 
<hr> 
<p><img src="2.gif" style="vertical-align:middle"/> 
世界 杯 ! 中 国 队 ! 加 油 ! <img src="1.gif" style="vertical-align:text-bottom"> 
</p> 
<p> 
世界 杯 <b style="font-size:8pt;vertical-align:100%">2018</b>! 
中 国 队 <b style="font-size: 8pt;vertical-align:-100%">[ 注 ]</b>! 
加 油 ! <img src="1.gif" style="vertical-align:baseline"> 
</p> 
</body> 
</html> 


在 正 11.0 中 浏览 效果 如 图 10-15 所 示 ， 可 以 看 到 图 文 在 垂直 方向 以 不 同 的 对 齐 方式 显示 。 
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世界 丁 muel 中 国 队 mn! 加 油 ! 二 
| 世界 杯 ! 中 国 队 ! 加 油 ! 疙 
办 杯 ! 中 国 队 ! 加 油 ! -ep 

嫩 蕊 
| 世界 杯 ! 中 国 队 ! 加 油 ! 旋 
oa -ee 
ed 起 
[a 


世界 杯 % 中 国 队 。 ! 加 油 ! 
En 


图 10-15 垂直 对 齐 显示 
从 上 面 实例 中 , 可 以 看 出 上 下 标 在 页 面 中 的 数学 运算 或 注释 标号 使 用 的 比较 多 。 顶 端 对 齐 
有 两 种 参照 方式 : 一 种 是 参照 整个 文本 块 ; 另 一 种 是 参照 文本 。 底部 对 齐 同 顶端 对 齐 方式 相同 ， 
分 别 参照 文本 块 和 文本 块 中 包含 的 文本 。 


于 行 高 值 来 计算 的 ， 而且 百分比 还 能 使 用 正 负 号 , 正 百分比 使 文本 上 升 ， 负 百分比 
使 文本 下 降 。 


vertical-align 属性 值 还 能 使 用 百分比 来 设置 垂直 高 度 ， 该 高 度 具有 相对 性 ， 它 是 基 
ER 


10.3.5 文本 转换 text-transform 

根据 需要 将 小 写字 母 转换 为 大 写字 母 或 者 将 大 写字 母 转换 小 写 , 在 文本 编辑 中 都 是 很 常见 
的 。 在 CSS 样式 中 ，text-transform 属性 可 用 于 设置 文本 字体 的 大 小 写 转换 。 

text-transform 属性 语法 格式 如 下 : 


text-transform:nonelcapitalizel|uppercase|lowercase 
其 属性 值 含义 如 表 10-13 所 示 。 
表 10-13 文本 转换 属性 值 


属性 值 
none 
capitalize 将 每 个 单词 的 第 一 个 字母 转换 成 大 写 ， 其 余 无 转换 发 生 
Uppercase 转换 成 大 写 

lowercase 转换 成 小 写 
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因为 文本 转换 属性 仅 作用 于 字母 型 文本 ， 相 对 来 说 比较 简单 。 


【 例 10.16】 “实例 文件 : chl10\10.16.html) 


<!DOCTYPE html> 

<html> 

<body style="font-size:15pt;font-weight:bold"> 

<p style="text-transform:none">welcome to beijing</p> 

<p style="text-transform:capitalize">welcome to beijing</p> 
<p style="text-transform:lowercase">WELCOME TO BEIJING</p> 
<p style="text-transform:uppercase">welcome to beijing</p> 
</body> 

</html> 


在 正 11.0 中 浏览 效果 如 图 10-16 所 示 ， 可 以 看 到 大 小 写字 母 转换 显示 。 


- 0O x 
| 各。 D:\ 本 书 源 代码 Vrode 光 图 ~ 他 || 要 过 
ls Dx\ 本 书 源 代码 \code\ 源 代 .. X | 了 了 
| 瘟 下, trinE 


Welcome to beijing 
Welcome To Beijing 
Welcome to beijing 


WELCOME TO BEIJING 


图 10-16 大 小 写字 母 转换 显示 


10.3.6 ”水 平 对 齐 方 式 text-align 


一 般 情况 下 ， 居 中 对 齐 适用 于 标题 类 文本 ， 其 他 对 齐 方 式 可 以 根据 页 面 布局 来 选择 使 用 。 
根据 需要 ， 可 以 设置 多 种 对 齐 ， 如 水 平方 向 上 的 居中 、 左 对 齐 、 右 对 齐 或 两 端 对 齐 等 。 在 CSS 
中 ， 可 以 通过 text-align 属性 进行 设置 。 

text-align 属性 用 于 定义 对 象 文本 的 对 齐 方式 。 与 CSS 2 相 比 ，CSS3 增加 了 start、end 和 
string 属性 值 。text-align 语法 格式 如 下 : 

{text-align: 属 性 值 } 


其 属性 值 含 义 如 表 10-14 所 示 。 
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表 10-14 水平 对 齐 方式 属性 值 


属性 值 说 明 

start 文本 向 行 的 开始 边缘 对 齐 

end 文本 向 行 的 结束 边缘 对 齐 

ye 文本 向 行 的 左边 缘 对 齐 。 在 垂直 方向 的 文本 中 , 文本 在 left-to-right 模式 下 向 开始 边缘 
对 齐 

文本 向 行 的 右边 缘 对 齐 。 在 垂直 方向 的 文本 中 , 文本 在 left-to-right 模式 下 向 结束 边缘 

Tight 5 

center 文本 在 行内 居中 对 齐 

justify 文本 根据 text-justify 的 属性 设置 方法 分 散 对 齐 ， 即 两 端 对 齐 ， 均 匀 分 布 


继承 父 元 素 的 对 齐 方式 , 但 有 个 例外 : 继承 的 start 或 end 值 是 根据 父 元 素 的 direction 
值 进行 计算 的 ， 因 此 计算 的 结果 可 能 是 let 或 right 

string 是 一 个 单个 的 字符 ， 否 则 就 忽略 此 设置 ， 按 指定 的 字符 进行 对 齐 。 此 属性 可 以 
四 跟 其 他 关键 字 同 时 使 用 ， 如 果 没 有 设置 字符 ， 则 默认 值 是 end 方式 


inherit 继承 父 元 素 的 对 齐 方式 


match-parent 


在 新 增加 的 属性 值 中 ，start 和 end 属性 值 主要 是 针对 行内 元 素 的 〈 即 在 包含 元 素 的 头 部 或 
尾部 显示 ) ， 而 <string> 属 性 值 主要 用 于 表格 单元 格 中 ， 将 根据 某 个 指定 的 字符 对 齐 。 


【 例 10.17】“《 实 例文 件 : ch10\10.17.html) 
<!DOCTYPE html> 

<html> 

<body> 

<hl style="text-align:center"> 登 幽 州 台 歌 </h1> 
<h3 style="text-align:left"> 选 自 : </h3> 

<h3 style="text-align:right"> 

<img src="1.gif"/> 唐 诗 三 百 首 </h3> 

<p style="text-align:justify"> 

前 不 见 古 人 后 不 见 来 者 (这 是 一 个 测试 ， 这 是 一 个 测试 ， 这 是 一 个 测试 》 
</p> 

<p style="text-align:strat"> 念 天 地 之 悠悠 </p> 
<p style="text-align:end"> 独 恰 然 而 涕 下 </p> 
</body> 

</html> 


在 下 11.0 中 浏览 效果 如 图 10-17 所 示 , 可 以 看 到 文字 在 水 平方 向 上 以 不 同 的 对 齐 方 式 显示 。 
text-align 属性 只 能 用 于 文本 块 ， 而 不 能 直接 应 用 到 图 像 标记 <img>。 如 果 要 使 图 像 与 文本 
一 样 应 用 对 齐 方式 ， 就 必须 将 图 像 包含 在 文本 块 中 。 如 上 例 ， 由 于 向 右 对 齐 方 式 作 用 于 <h3> 
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标记 定义 的 文本 块 ， 图 像 包 含 在 文本 块 中 ， 所 以 图 像 能 够 与 文本 一 样 向 右 对 齐 。 


CSS 只 能 定义 两 端 对 齐 方式 , 但 对 于 具体 的 两 端 对 齐 文本 如 何 分 配 字体 空间 以 实现 
EE 文本 左右 两 边 均 对 齐 ，CSS 并 不 规定 ， 这 就 需要 设计 者 自行 定义 了 。 
关 DA 古书 淹 代 码 \code\ 深 代码 ch07\7 国 ~ 吃 | 授 索 - D7] 二 . 
局 D:\ 本 书 源 代码 \code\ 源 代 . 3 
诊 台 百 庆 一 下 ,人 St 
登 幽 州 台 歌 
选 自 : 
本 
失声 诗 三 百 首 
前 不 见 古 人 后 不 见 来 者 (这 是 一 个 测试 ， 这 是 一 个 测试 ， 这 是 一 个 测试 ) 
念 天 地 之 悠悠 
独 愉 然 而 涕 下 
图 10-17 对 齐 效 果 


10.3.7 文本 缩 进 text-indent 


在 普通 段落 中 ,通常 首 行 缩 进 两 个 字符 ， 用 来 表示 这 是 一 个 段落 的 开始 。 同 样 在 网 页 的 文 
本 编辑 中 可 以 通过 指定 属性 来 控制 文本 缩 进 。CSS 的 text-indent 属性 可 用 来 设置 文本 块 中 首 行 
的 缩 进 。 

text-indent 属性 语法 格式 如 下 : 


text-indent :length 


其 中 ，length 属性 值 表示 有 百分比 数字 或 有 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 ， 允 许 
为 负 值 。 可 以 这 样 认为 ，text-indent 属性 可 以 定义 两 种 缩 进 方式 : 一 种 是 直接 定义 缩 进 的 长 度 ; 
另 一 种 是 定义 缩 进 百分比 。 使 用 该 属性 ，HTML 任何 标记 都 可 以 让 首 行 以 给 定 的 长 度 或 百分比 


【 例 10.18】 实 例文 件 : ch10\10.18.html) 
<!DOCTYPE html> 

<html> 

<body> 

<p style="text-indent:30mm"> 

此 处 直接 定义 长 度 ， 直 接 缩 进 。 

</p> 
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<p style="text-indent:10%"> 
此 处 使 用 百分比 ， 进 行 缩 进 。 

</p> 

</body> 

</html> 


在 正 11.0 中 浏览 效果 如 图 10-18 所 示 ， 可 以 看 到 文字 以 首 行 缩 进 方式 显示 。 


- OO x 
着 ”D:\ 本 书 源 代码 YCode 详 图 ~ 久 搜 索 .… 
情 DA\ 本 书 源 代码 \code\ 源 代 .. x [DY 
请 攻 百 度 一 下 ， 你 8 知道 


此 处 直接 定义 长 度 ， 直 接 缩 进 。 
此 处 使 用 百分比 ， 进 行 缩 进 。 


图 10-18 缩 进 显示 窗口 


如 果 上 级 标记 定义 了 text-indent 属性 ， 那 么 子 标记 可 以 继承 其 上 级 标记 的 缩 进 长 度 。 


10.3.8 ”文本 行 高 ine-height 
在 CSS 中 ，line-height 属性 用 来 设置 行 间距 ， 即 行 高 。 其 语法 格式 如 下 : 
line-height:normalllength 
其 属性 值 的 具体 含义 如 表 10-15 所 示 。 
表 10-15 “文本 行 高 属性 值 


length 百分比 数字 或 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 ， 允 许 为 负 值 。 其 百分比 取 值 基于 字 


体 的 高 度 尺寸 


【 例 10.19】〔 实 例文 件 ，ch10\10.19.html) 


<!DOCTYPE html> 

<html> 

<body> 

<div style="text-indent:10mm;"> 
<p style="line-height:50px"> 


世界 杯 (World Cup, FIFA World Cup) ， 国 际 足 联 世 界 杯 ， 志 界 足 球 锦标 赛 ) 是 世界 上 最 


高 水 平 的 足球 比赛 ， 与 奥运 会 、F1 并 称 为 全 球 三 大 顶级 赛事 。 
</p> <p style="line-height:50%"> 


世界 杯 (World Cup, FIFA World Cup) ， 国 际 足 联 世 界 杯 ， 世 界 足 球 锦标 赛 ) 是 世界 上 最 
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高 水 平 的 足球 比赛 ， 与 奥运 会 、F1 并 称 为 全 球 三 大 顶级 赛事 。 
</p> 
</div> 
</body> 
</html> 


在 正 11.0 中 浏览 效果 如 图 10-19 所 示 , 可 以 看 到 有 上段 文 字 重 又 在 一 起 , 此 为 行 高 设置 过 小 


| | 好 书 源 代 克 \code 汪 图 ”地 | 壹 实 - 万 - 
后 Da 本 书 叹 KMcodev 障 人- 
衣 EE 下 , ie 

世界 杯 《World Cup, FIFA World Cup) ， 国 际 足 联 世界 杯 ， 世 界 

足球 锦标 赛 ) 是 世界 上 最 高 水 平 的 足球 比赛 ， 与 奥运 会 、F1 并 称 为 全 球 


三 大 项 级 赛事 - 


Ee Pd 二 展 钱 呈 区 民居 uk 因 


图 10-19 设置 文本 行 高 显示 效果 


10.3.9 处理 空白 white-sapce 


在 网 页 文本 编辑 中 ， 有 时 需要 包含 一 些 不 必要 的 制 表 符 、 换 行 符 或 额外 的 空白 符 (多 于 单 
词 之 间 的 一 个 标准 的 空格 ) ， 这 些 符 号 统称 为 空白 字符 。 通 常情 况 下 ， 浏 览 器 可 以 自动 忽略 这 
些 额 外 的 空白 字符 并 按照 一 种 适合 窗口 的 方式 布置 文本 。 它 会 丢弃 段落 开头 和 结尾 处 任何 额外 
的 空白 ， 并 将 单词 之 间 的 所 有 制 表 符 、 换 行 和 额外 的 空白 压缩 (合并 ) 成 单一 的 空白 字符 。 此 
外 ， 当 用 户 调整 窗口 大 小 ， 时 浏览 器 会 根据 需要 重新 格式 化 文本 以 便 匹 配 新 的 窗口 尺寸 。 对 于 
某 些 元 素 ， 可 能 会 以 某 种 方式 特意 格式 化 文本 以 便 包 含 额外 的 空白 字符 ， 而 不 抛弃 或 压缩 这 些 
字符 。 

在 CSS 中 ，white-space 属性 用 于 设置 对 象 内 空格 字符 的 处 理 方式 ， 该 属性 对 文本 的 显示 
有 着 重要 的 影响 。 在 标记 上 应 用 white-space 属性 可 以 影响 浏览 器 对 字符 串 或 文本 间 空 白 的 处 理 
方式 。 

white-space 属性 语法 格式 如 下 : 


white-space:normal|prelnowraplpre-wraplpre-line 


其 属性 值 含义 如 表 10-16 所 示 。 


.204 。 
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表 10-16 处理 空白 属性 值 


属性 值 说 明 

normal 默认 ， 空 白 会 被 浏览 器 忽略 

pre 空白 会 被 浏览 器 保留 。 其 行为 方式 类 似 HTML 中 的 <pre> 标记 
nowrap 文本 不 会 换行 ， 文 本 会 在 同一 行 上 继续 ， 直 到 遇 到 <br/> 标记 为 止 
pre-wrap 保留 空白 符 序列 ， 但 是 正常 地 进行 换行 

pre-line 合并 空白 符 序 列 ， 但 是 保留 换行 符 

inherit 规定 应 该 从 父 元 素 继承 white-space 属性 的 值 


【 例 10.20】 实例 文件 ，ch10\10.20.html) 
<!DOCTYPE html> 
<html> 
<body> 
<hl style="color:red; text-align:center;white-space:pre"> 科 学 发 展 
观 ! </h1> 
<div> 
<p style="white-space:nowrap;text-indent:10mm"> 
重视 农业 、 农 村 、 农 民 问题 是 中 国共 产 党 一 贯 的 战略 思想 。<br/> 
“三 农 ”问题 始终 是 关系 党 和 人 民事 业 发 展 的 全 局 性 、 根 本 性 问题 ， 农 业 丰 则 基础 强 ， 农 民 富 则 国 
家 盛 ， 农 村 稳 则 社会 安 。” 
</p> 
<p style="white-space:pre-wrap;text-indent:10mm"> 
重视 农业 、 农 村 、 农 民 问题 是 中 国共 产 党 一 贯 的 战略 思想 。“ 三 农 ”问题 始终 是 关系 党 和 人 民 
事业 发 展 的 全 局 性 、 
根本 性 问题 ， 农 业 丰 则 基础 强 ，<br/> 
农民 富 则 国家 盛 ， 农 村 稳 则 社会 安 。 
</p> 
<p style="white-space:pre-line;text-indent:10mm"> 
重视 农业 、 农 村 、 农 民 问 题 是 中 国共 产 党 一 贯 的 战略 思想 。“ 三 农 ” 问 题 始 终 是 关系 党 和 
人 民事 业 发 展 的 全 局 性 、 
根本 性 问题 ， 农 业 丰 则 基础 强 ，<br/> 
农民 富 则 国家 盛 ， 农 村 稳 则 社会 安 。 
</p> 
</div> 
</body> 
</html> 


在 正 11.0 中 浏览 效果 如 图 10-20 所 示 ， 可 以 看 到 文字 处 理 空白 的 不 同方 式 。 
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时 、 农 民 问 题 


思想 
关系 党 和 人 民事 问题 ， 农 业 丰 则 基础 强 ， 农 民 窗 由 


~ 党 一 货 的 战略 思想 。 “三 农 ”问题 始终 是 关系 党 和 人 民事 


国家 盛 ， 农 村 稳 则 社会 安 


重视 农业 、 农 村 、 农 民 问题 是 中 国共 产 党 一 贰 的 战略 思想 。“ 三 农 ” 问 题 始 人 


关系 党 和 人 民事 业 发 展 


的 全 局 
根本 性 问题 ， 农 业 丰 则 直 


农民 罕 则 国家 三 ， 农 会 安 


¢ > 


图 10-20 “处理 空白 显示 


10.3.10 ”文本 反 排 unicode-bidi 和 direction 

在 网 页 文本 编辑 中 ， 通 常 英语 文档 的 基本 方向 是 从 左 至 右 。 如 果 文 档 中 某 一 段 的 多 个 部 分 
包含 从 右 至 左 阅读 的 语言 ， 此 时 可 以 通过 CSS 提供 的 unicode-bidi 和 direction 两 个 属性 解决 文 
本 反 排 的 问题 。 

unicode-bidi 属性 语法 格式 如 下 : 

unicode-bidi:normal1lbidi-overridelembed 


其 属性 值 含义 如 表 10-17 所 示 。 


表 10-17 unicode-bidi 属性 值 


属性 值 说 明 
| 默认 值 ， 元 素 不 会 打开 一 个 额外 的 嵌入 级 别 。 对 于 内 联 元 素 ， 隐 式 的 重新 排序 将 跨 元 
norma 
素 边界 起 作用 
与 embed 值 相同 ， 但 除 此 之 外 ， 在 元 素 内 ，direction 属性 将 严格 按 顺序 进行 排序 。 
bidi-override 
此 值 蔡 代 隐 式 双向 算法 
je 元 素 将 打开 一 个 额外 的 嵌入 级 别 。direction 属性 的 值 指定 嵌入 级 别 。 重新 排序 在 元 素 
embe 
内 是 隐 式 进行 的 


direction 属性 用 于 设置 文本 流 的 方向 ， 其 语法 格式 如 下 : 


direction:ltrlrtl|linherit 


其 属性 值 含义 如 表 10-18 所 示 。 


CSS3 字体 与 段落 属性 第 10 齐 


表 10-18 direction 属性 值 


属性 值 说 明 

ltr 文本 流 从 左 到 右 

It 文本 流 从 右 到 左 
inherit 文本 流 的 值 不 可 继承 


【 例 10.21】 (实例 文件 :ch10\10.21.html) 


<!DOCTYPE html> 

<html> 

<head> 

<style type="text/css"> 
.a{direction:rtl;unicode-bidi:bidi-override;text-align:left} 
</style> 

</head> 

<body> 

<h3> 纯 CSS 反 转 字 符 串 使 用 了 direction 和 unicode-bidi</h3> 
<div class=a> 秋 风 吹 不 尽 ， 总 是 玉 关 情 。 

</div> 

</body> 

</html> 


在 正 11.0 中 浏览 效果 如 图 10-21 所 示 ， 可 以 看 到 文字 以 反 转 形式 显示 。 
一 和 
外 ”Di 本 书 源码 vode 和 靖国 ”他 搜索 - Pp- 


| 局 Ds 本 书 至 fcodev 白 代 - 
请 各 百度 下， 人 Stx 乔 


纯 CSS 反 转 字符 串 使 用 了 direction 和 unicode-bidi 


。 情 关 玉 是 总 ， 尽 不 吹风 秋 


图 10-21 文本 反 转 显示 


10.4 综合 实例 1 一 一 制作 旅游 宣传 网 页 


在 前 面 小 节 中 ， 主 要 介绍 了 关于 文字 和 段落 方面 的 CSS 属性 设置 ， 在 本 节 中 将 利用 上 面 
的 知识 创建 一 个 旅游 宣传 网 页 ， 充 分 利用 CSS 对 图 片 和 文字 的 修饰 方法 ,实现 页 面 效 果 。 具 体 
操作 步骤 如 下 : 


L@ 国 分 析 需 求 。 


本 综合 实例 要 求 在 网 页 的 最 上 方 显示 出 标题 ,标题 下 方 是 正文 ， 其 中 正文 部 分 是 图 片 和 文 
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字段 落 部 分 。 上 述 要 求 使 用 CSS 样式 属性 实现 ， 效 果 如 图 10-22 所 示 。 


[ET 只 ~ 外 
[FE 
高 Ea 下, fe 


得 点 介绍 


云 台 山 游览 历史 抄 久 ， 人 文 售 秽 主 高 。 扎 考 ， 云 台山 早 在 东汉 时 期 就 
有 市 王 及 其 皇室 到 此 采风 ， 改 血 : 扫 亚 时 不 少 名 士 来 此 加 难 、 隐 居 ; 岂 宋 
时 受 佛教 育 鳞 ， 多 处 建 半 建 塔 。 尤 其 是 唐 末 以后， 云 台 山 成 了 文 他 客 游 
山 玩 水 、 读 许 论 所 的 主要 去 处 之 一 。 唐 代 背 人 王 搬 首 在 此 置 下 了 “ 独 在 异乡 
为 异 客 。 每 连 住 节 信息 条 到 知 兄弟 登高 处 ， 污 所 芝 疯 少 一 人 "的 千古 绝 
日。 目前， 保密 或 正在 锋 复 的 幅 迹 及 其 他 人 文 景观 有 东汉 黄帝 刘 苏 幕 - 汉 
献 壳 陵 、“ 竹 林 七 贤 " 隐 居 处 - 百 家 岩 贡 神 师 在 此 建 寺 、 孙 思 道 炼 药 处 -- 
药 王 洞 、 王 推 做 许 处 -- 元 克 现 ， 以 及 万 若 夺 。 影 寺 等 。 云 台山 风 其 游 览 区 
于 20 世纪 80 年 代 初 开始 经 营 开发 并 对 外 按 竺 游客 。 1994 年 1 月 10 日 被 网 
务 院 列 为 国家 重点 风 亲 名 胜 区 。 一 年 四 季 游 客 不 断 ， 日 接待 那 客 闻 高 达 39 
万 人 。 经 过 近 二 十 年 的 开发 和 人 收复 ,游览 区 内 现 有 老 潭 内.….… 


神农 山 风景 名 胜 区 ， 是 世界 地 质 公 殉 、 世 界 身 然 基 例 组 织 A 绍 优 先 保 
护 区 、 国 家 AAAA 级 风 东 旅游 区 、 国 家 级 狼 歇 自然 保护 区 、 省 级 科普 基 
地 它们 于 这 用 市 城区 西北 23 公里 的 太行 山大 。 共有 八大 景区 136 个 景 
点 ， 占 地 总 而 积 久 96 平方 公里 。 主 峰 筑 金 顶 洗 拔 1028 米 ， 囊 立 中 天 。 气 鸡 
朴 浑 : 三 大 天 门 比 秦山 中 154 年 。 这 里 曾 是 燃 帝 神农 神 百 答 ， 尝 百草 ， 寻 二 
此 天 的 圣地 ， 也 是 道教 创始 人 老子 筑 炉 炼丹 、 成 道 仙 升 之 所 ， 古 往 今 来， 
优美 的 自然 风光 吸引 不 少帝 王将 相 、 文 人 畦 客 到 此 游览 ， 唐 明 皇 李 陈 基 、 
音 宇 、 桔 商 隐 等 历代 名 家 曾 在 此 留 下 许多 合作 佳作 。 这 里 有 雁 胡 险峻 的 代 
会 坛 。 更 有 天 下 一 绝 的 哲 松 岭 ，。15600 杂 株 白 幅 松 姿态 万 千 、 风 情 万 
种 、 黄 好多 姿 地 生长 于 县 庄 绝 的 之 其 。 居 世界 五 大 美人 松 之 芮 。 神农 山 一 
侠 四 季节 色 不 同 ， 看 党 眉 花 烂漫 、 夏 看 流 打 飞 灌 、 秋 观 潭 山 红叶 、 冬 葛 水 硕 玉 龙 ， 荔 走 其 间 ， 移 沙 换 菏 ， 忧 若 人 则 仙 卉 ， 令 人 路 


图 10-22 ”旅游 宣传 网 页 


IO3 编写 index.html 文件 。 


该 页 面 中 每 个 景点 的 介绍 都 包括 景点 图 片 、 景 点 图 片 说 明 及 景点 介绍 , 用 HTMLS5 的 article 
表示 一 个 景点 ，figure 表示 景点 图 片 和 说 明 ， 景 点 介绍 使 用 段落 p。index.html 文件 结构 如 下 : 


<!DOCTYPE html> 
<head> 
<meta charset="utf-8" /> 
<title> 河 南 焦作 景点 介绍 </title> 
<link type="text/css" rel="stylesheet" href="css.css" /> 
</head> 
<body> 
<section> 
<h5> 景 点 介绍 </h5> 
<article> 
<figure> 
<img src="images/ 焦 作 青 龙 峡 3.jpg" width="220" height="140" /> 
<figcaption> 
云 台 山 
</figcaption> 
</figure> 
<p> 云 台山 游览 历史 悠久 ， 人 文 景观 丰富 。 据 考 云 台山 早 在 东汉 时 期 就 有 帝王 及 其 皇室 到 
此 采风 、 避 哮 ; 魏 晋 时 不 少 名 士 来 此 避难 、 隐 居 ; 上 唐 宋 时 受 佛教 青睐 ， 多 处 建 寺 建 塔 。 尤其 是 唐 宋 以 后 ， 
台山 成 了 文人 墨客 游 山 玩 水 、 谈 诗 论 道 的 主要 去 处 之 一 。 唐 代 诗 人 王 维 曾 在 此 留 下 了 “ 独 在 异乡 为 异 
客 ， 每 逢 佳节 倍 思 亲 。 遥 知 兄 弟 登 高 处 ， 遍 插 荣 英 少 一 人 ”的 千古 绝唱 。 目 前 ， 保 留 或 正在 修复 的 遗迹 
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及 其 他 人 文 景观 有 东汉 黄帝 刘 协 幕 一 汉 献 帝 陵 、“ 竹 林 七 贤 ” 隐 居 处 一 一 百 家 岩 稠 禅师 在 此 建 寺 、 
孙 思 录 炼 药 处 一 一 药 王 洞 、 王 维 做 诗 处 一 一 元 贞观 ， 以 及 万 善 村 、 影 寺 等 。 云 台山 风景 游览 区 于 20 
世纪 80 年 代 初 开始 经 营 开发 并 对 外 接待 游客 。 1994 年 1 月 10 日 被 国务 院 列 为 国家 重点 风景 名 胜 
区 。 一 年 四 季 游 客 不 断 ， 日 接待 游客 最 高 达 3.9 万 人 。 经 过 近 二 十 年 的 开发 和 修复 ， 游 览 区 内 现 
有 老 潭 沟 ……</p> 


</article> 


<article> 
<figure> 
<img src="images/ 焦 作 影 视 城 .jpg" width="220" height="140" /> 
<figcaption> 
神农 山 
</figcaption> 
</figure> 
<p> 神 农 山 风景 名 胜 区 ， 是 世界 地 质 公 园 、 世 界 自 然 基 金 组 织 A 级 优先 保护 区 、 国 家 AAAA 
级 风景 旅游 区 、 国 家 级 猕猴 自然 保护 区 、 省 级 科普 基地 ， 它 位 于 沁 阳 市 城区 西北 23 公 里 的 太行 山 雹 ， 共 
有 八大 景区 136 个 景点 ， 占 地 总 面积 为 96 平 方 公里 。 主 峰 紫 金 顶 海拔 1028 米 ， 意 立 中 天 ， 气 势 雄 浑 ， 
三 大 天 门 比 泰 山 早 154 年 。 这 里 曾 是 炎帝 神农 辨 百 谷 、 尝 百草 、 登 坛 祭 天 的 圣地 ， 也 是 道教 创始 人 老子 筑 
炉 炼 丹 、 成 道 仙 升 之 所 。 上 古往今来 ， 优 美的 自然 风光 吸引 不 少帝 王将 相 、 文 人 墨客 到 此 游览 ， 唐 明 皇 李 
隆基 、 韩 愈 、 李 商 隐 等 历代 名 家 曾 在 此 留 下 许多 传世 佳作 。 这 里 有 雄 奇 险峻 的 紫金 坛 ， 更 有 天 下 一 绝 的 
白松 岭 。15600 余 株 白 锥 松 姿 态 万 千 、 风 情 万 种 、 娴 娜 多 姿 地 生长 于 悬崖 绝 岭 之 内 ， 居 世界 五 大 美人 松 
之 首 。 神农 山 一 年 四 季 景 色 不 同 ， 春 赏 桃花 烂漫 、 夏 看 流 泉 飞 瀑 、 秋 观 满 山 红叶 、 冬 览 冰 和 霜 玉 龙 ， 游 走 
其 间 ， 移 步 换 景 ， 忱 车 人 间 仙 境 ， 令 人 魄 怪 瑰 动 ， 陡 然 升 华 ……</p> 


</article> 


<article> 
<figure> 
<img src="images/ 焦 作 青 龙 峡 .jpg" width="220" height="140" /> 
<figcaption> 
群英 湖 
</figcaption> 
</figure> 
<p> 群 英 湖 风景 名 胜 区 地 处 太行 山 前 沿 ， 面 积 约 25 平 方 公里 ， 跨 越 焦 作 市 区 、 修 武 县 、 博 
爱 县 与 山西 省 晋城 市 地 界 。 群 英 湖 风景 区 内 景点 集中 ， 分 布 均匀 。 河 流 、 湖 泊 深 秀 ， 高 山 、 峡 谷 险峻 ， 
悬崖 、 浴 洞 遍布 ， 奇 峰 、 怪 石林 立 。 有 寺庙 、 古 树 ， 有 人 台地、 草坪 ， 有 丛林 、 花 卉 及 多 种 野生 动 植物 ， 
还 有 众多 上 古迹 和 神话 传说 ， 更 有 世界 最 高 的 砌 石 拱 坝 这 一 雄伟 的 景观 ， 真 可 谓 “ 群 英 蔡 茜 ”。 景 区 内 各 
类 风景 自然 交织 ， 环 境 幽 静 ， 山 清水 秀 ， 确 是 一 处 难得 的 旅游 胜地 。 大 坝 风 光 群英 湖 坝 高 100 .5 米 ， 
是 我 国 最 高 的 砌 石 坝 。 大 坝 符 立 于 高 山峡 谷 之 中 ， 气 势 雄 伟 挺拔 ， 造 型 美观 ， 曾 先后 以 图 片 的 形式 在 国 
际 大 坝 会 议和 广交会 上 介绍 展 出。 我 国正 式 出 版 的 《中 国 大 坝 》、《 中 国 拱 坝 》 图 集 ， 以 及 有 关 坝 工 建 
设 的 文献 资料 ， 都 将 群英 湖 大 坝 作 为 典型 子 以 刊登 。 群 英 湖 大 坝 确实 为 我 国 坝 工 建设 上 的 一 枚 奇 苑 。 三 
潭 映 月 景观 集 线 瀑 、 帘 瀑 、 绿 潭 于 一 体 ， 呈 “7” 梯 状 分 布 ， 天 高 云 淡 ， 四 面 环 山 ， 从 林 茂 密 ， 溪 流 不 断 ， 
是 人 们 假日 休闲 的 好 去 处 ……</p> 


</article> 


<article> 
<figure> 
<img src="images/ 焦 作 沁 阳 神 农 坛 风景 图 4.jpg" width="220" height="140" 
/> 
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<figcaption> 
青龙 峡 
</figcaption> 
</figure> 
<p> 焦 作 青 龙 峡 位 于 河南 省 焦作 市 修 武 县 ， 是 河南 云 台山 世界 地 质 公 园 主要 游览 区 之 一 ， 
也 是 目前 全 省 唯一 的 峡谷 型 省 级 风景 名 胜 区 ,被 誉 为 “中 原 第 一 峡 ”。 焦作 青龙 峡 气 候 独特 、 山 清水 秀 、 
环境 优美 ， 是 一 处 天 然 “ 氧 吧 ”， 是 原始 生态 旅游 的 绝 佳 去 处 。 青 龙 峡 是 集 峰 、 岸 、 岭 、 癌 、 台 、 沟 、 
泪 、 川 、 瀑 、 洞 等 地 貌 于 一 体 的 自然 山水 型 景区 。2000 年 被 确定 为 河南 省 风景 名 胜 区 ， 总 面积 108 平 方 
公里 ， 由 青龙 峡 、 净 影 峡 、 影 寺 盆 地 、 双 庙 、 猕 猴 谷 、 马 头 山 和 大 山 脑 七 大 游览 区 组 成 ， 主 要 景点 100 
多 处 。 主峰 青龙 峰 海 拔高 达 1323 米 ， 站 在 岭 诬 ， 大 有 “举目 四 观 天 下 小 ”之 感慨 。 波 澜 壮阔 的 望 龙 瀑 、 
神奇 独特 的 倒流 泉 、 妙 不 可 言 的 七 彩 潭 、 堪 称 一 绝 的 “石上 春秋 ” 独 具 特 色 的 溶洞 景观 ， 再 加 上 天 然 原 
始 的 植物 群落 ， 构 成 了 一 幅 幅 极 富 创意 的 山水 画卷 ……</P> 
</article> 
<br /> 
SEE 
<beew> 
</section> 
</body> 
</html> 


国人 编写 css.css 文件 。 
设置 网 页 中 默认 文字 大 小 为 13 像素 ， 代 码 如 下 : 


*{font-size:13px;} 


设置 网 页 的 背景 颜色 为 浅 绿色 ， 代 码 如 下 : 


/* 页 面 背 景 颜色 */ 
body{ background-color:"#ddfcca";} 


设置 section 区 块 的 属性 ， 代 码 如 下 : 


sectionf{ 
width:760px; 
margin:0px auto; /* 实 现 区 块 水 平 居 中 */ 
padding:0px 20px; 
border: lpx #50ad44 solid; 
} 


为 景点 介绍 标题 设置 边 距 、 高 度 及 边框 颜色 ， 代 码 如 下 : 


h5{ 
margin: 10px 20px; /* 设 置 外 边 距 的 大 小 */ 
height:23px; /* 设 置 标题 的 高 度 */ 
border-bottom:3px #50ad44 solid; /* 设 置 下 边框 的 样式 */ 
text-indent:2em; /* 设 置 文本 缩 进 */ 


| 
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为 景点 照片 和 说 明 的 父 对 象 figure 设置 相关 属性 ， 代 码 如 下 : 


figure{ 
padding-right:22px; /* 设 置 右 内 边 距 的 大 小 */ 
display:block; /* 使 段落 生出 行内 框 */ 
float:left; /* 设 置 元 素 向 左 浮动 */ 
width:220px; /* 设 置 元 素 的 高 度 */ 


} 


为 article 设置 相关 属性 ， 代 码 如 下 : 


articlei{ 
border-bottom:1px solid #50ad44; /* 设 置 底部 边框 样式 */ 
line-height:20px; /* 设 置 行 高 的 大 小 */ 
margin-bottom:10px; /* 设 置 元 素 的 下 外 边 距 */ 


} 

为 景点 介绍 段落 p 设置 相关 属性 ， 代 码 如 下 : 

pt{ 
margin:10px 13px; /* 设 置 外 边 距 的 大 小 */ 
text-indent:2em; /* 设 置 文本 缩 进 */ 

有 


为 景点 图 片 说 明 figcaption 设置 相关 属性 ， 代 码 如 下 : 


figcaptiont{ 
text-align:center; /* 设 置 段 落 居中 显示 */ 
color:#003300; /* 设 置 段落 的 颜色 */ 


text-decoration:underline; /* 设 置 段落 下 夯 线 效果 */ 
| 


为 景点 图 片 img 设置 相关 属性 ， 代 码 如 下 : 


img{margin-left:10px;} /* 设 置 外 边 距 的 大 小 */ 


10.5 ”综合 实例 2 一 一 网 页 简单 图 文 混 排 


在 一 个 新 闻 网 页 中 ， 出 现 最 多 的 就 是 文字 和 图 片 ， 图 文 并 茂 的 文章 能 够 生动 地 表达 新 闻 主 
题 。 本 实例 将 利用 前 面 介绍 的 文本 和 段落 属性 创建 一 个 图 片 的 简单 混 排 ， 复 杂 的 图 片 混 排 会 在 
后 面 介 绍 。 具 体 步 又 如 下 : 

L@ 国 分 析 需 求 。 


本 综合 实例 要 求 在 网 页 的 最 上 方 显示 出 标题 ， 标 题 下 方 是 正文 ， 在 正文 部 分 显示 图 片 。 上 
述 要 求 使 用 CSS 样式 实现 ， 效 果 如 图 10-23 所 示 。 
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本 ”Dr 天 人 现 ode\ 尖 KR\ 国 ”他 | 按 过 Pp- 立 包 @ 
Dvde Be x 
病人 ER 下, {rele 


女足 世界 本 前瞻 : 巴西 女足 革 扒 澳洲 女足 


周 四 凌晨 ， 女 子 世界 杯 分 组 赛 D 组 首 轮 的 赛事 全 面 展开 ， 其 中 南美 劲旅 巴西 女足 将 在 德国 门 兴 
格拉 德 巴赫 与 澳洲 女足 进行 较 最 - 


巴西 足球 一 向 被 外 界 认可 ， 巴 西 女 足 上 届 女 子 世界 杯 决 赛 中 遗憾 地 0 比 2 不 政 德国 女足 ， 球 员 
满腹 怨气 ， 今 届 谷 卷土重来。 


在 近 6 会 国际 赛 中 ， 巴 西 女足 取得 4 胜 2 和 的 不 败 战 
绩 ， 在 备战 今 届 赛 事 中 的 两 场 热身 赛 中 ， 相 继 3 比 0 完 
智利 女足 和 4 比 1 大 胜 阿 根 廷 女足 ， 显 得 游 妨 有余 。 
比 希 中 立场 面 对 实 力 较 弱 的 澳洲 女足 ， 巴 西 女足 有 望 
取得 开门 红 。 澳 洲 女足 上 局 女子 世界 杯 在 半 准 决赛 中 
不 敌 巴 西 女 足 ， 止 步 八 强 ， 虽 然 在 上 仗 国际 赛 中 主场 2 
Ee， 但 在 之 前 2 仗 国际 赛 分 别 以 1 比 2 
- 足 ， 近 3 仗 失 球 多 达 
5 个 ， 澳 洲 女足 的 后 防线 漏洞 及 怕 难以 抵挡 巴西 女足 的 强大 攻势 ， 加 上 往 绩 上 澳洲 女足 3 战 皆 负 ， 
今 全 对阵 实力 较 强 的 巴士 女足 ， 澳 洲 女 足 只 能 寄 望 输 少 当 户 。 


图 10-23 ”图 文 混 排 显 示 
t@3 分 析 布局 并 构建 HTML。 
首先 需要 创建 一 个 HTML 页 面 , 并 用 DIV 将 页 面 划 分 为 两 个 层 (网 页 标题 层 和 正文 部 分 )。 


L@ 加 导入 CSS 文件 。 


将 CSS 文件 以 link 方式 导入 到 HIML 页 面 中 。 此 CSS 文件 定义 了 该 页 面 的 所 有 样式 ， 其 
导入 代码 如 下 : 


<link href="10-23.css" rel="stylesheet" type="text/css" /> 
04 完成 标题 部 分 。 


首先 设置 网 页 标题 部 分 ， 创 建 一 个 div 用 来 放置 标题 。 其 HTML 代码 如 下 : 


<div> 
<h1> 女 足 世 界 杯 前 瞻 : 巴西 女足 拆 擒 澳洲 女足 </h1> 


</div> 


在 CSS 样式 文件 中 修饰 HTML 元 素 。 其 CSS 代码 如 下 : 


hl{text-align:center; /* 设 置 段落 居中 显示 */ 
text-shadow:0.lem 2px 6px blue; /* 设 置 文字 阴影 效果 */ 
font-size:18px; /* 设 置 文本 大 小 */ 

) 


[加 完成 正文 和 图 片 部 分 。 
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下 


设置 网 页 正文 部 分 ， 正 文中 包含 一 张 图 片 。 其 HTML 代码 如 下 : 


<div> 

<p> 周 四 凌晨 ,女子 世界 杯 分 组 赛 D 组 首 轮 的 赛事 全 面 展开 ,其 中 南美 劲旅 巴西 女足 将 在 德国 门 兴 格 
拉 德 巴赫 与 澳洲 女足 进行 较量 。 

</p><p> 巴西 足球 一 向 被 外 界 认可 ， 巴 西 女足 上 届 女 子 世界 杯 决 赛 中 遗憾 地 0 比 2 不 敌 德国 女足 ， 
球员 满腹 怨气 ， 今 届 欲 卷土重来 。</p> 

<div class="im"> 

<img src="8.jpg"> 

</div> 

<p> 在 近 6 场 国际 赛 中 ， 巴 西 女足 取得 4 胜 2 和 的 不 败 战绩 ， 在 备战 今 届 赛 事 中 的 两 场 热 身 赛 中 ， 相 
继 3 比 0 完胜 智利 女足 和 4 比 1 大 胜 阿根廷 女足 ， 显 得 游 思 有 余 。 此 番 中 立场 面 对 实 力 较 弱 的 澳洲 女足 ， 巴 
西 女足 有 望 取得 开门 红 。 澳 洲 女足 上 届 女 子 世 界 杯 在 半 准 决赛 中 不 敌 巴 西 女 足 ， 止 步 八 强 ， 虽 然 在 上 场 
国际 赛 中 主场 2 比 1 力克 新 西 兰 女足 ， 但 在 之 前 2 场 国际 赛 分 别 以 1 比 2 相同 的 比分 不 敌 德国 女足 和 韩国 女 
足 ， 近 3 场 失 球 多 达 5 个 ， 澳 洲 女足 的 后 防线 漏洞 丽 怕 难以 抵挡 巴西 女足 的 强大 攻势 ， 加 上 往 绩 上 澳洲 女 
足 3 战 皆 负 ， 本 场 对 阵 实力 强大 的 巴西 女足 ， 澳 洲 女足 只 能 寄 望 输 少 当 赢 。 


</p> 

</div> 

CSS 样式 代码 如 下 : 

p{text-indent :8mm; /* 设 置 文本 缩 进 */ 
line-height:7mm; /* 设 置 行 高 的 大 小 */ 
.im{width:300px; /* 设 置 图 片 的 宽度 */ 
float:left; /* 设 置 图 片 向 左 浮动 */ 


border:#000000 soliq 1px; /* 设 置 图 片 的 边框 样式 */ 
} 


10.6 专家 解 惑 


1. 字体 为 什么 在 别 的 电脑 上 不 显示 ? 

楷体 很 漂亮 ， 草 书 也 不 逊色 于 宋体 ， 但 不 是 所 有 人 的 电脑 都 安装 有 这 些 字体 ， 所 以 在 设计 
网 页 时 ， 不 要 为 了 追求 漂亮 美观 ， 而 采用 一 些 比较 新 奇 的 字体 ， 有 时 这 样 往往 达 不 到 效果 。 用 
最 基本 的 字体 是 最 好 的 选择 。 

2. 网 页 中 空白 需要 处 理 吗 ? 

争取 不 留 空白 , 即使 有 足够 的 空间 , 也 不 要 用 图 像 、 文 本 或 不 必要 的 动画 GIF 来 填充 网 页 ， 
在 设计 时 应 该 避免 这 种 情况 发 生 。 

3. 文字 和 图 片 导 航速 度 哪个 更 快 ? 

使 用 文字 做 导航 栏 。 文 字 导 航 不 仅 速度 快 ， 而 且 更 稳定 。 例 如 ， 有 些 用 户 上 网 时 会 关闭 图 
片 。 在 处 理 文本 时 ， 不 要 在 普通 文本 上 添加 下 画 线 或 颜色 。 除 非特 别 需要 ， 和 否则 不 要 为 普通 文 
字 添 加 下 画 线 ， 避 免 使 读者 误 认为 文字 能 够 点 击 。 
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HTML 数据 表格 和 表单 都 是 网 页 中 常见 的 元 素 ， 表 格 通 常用 来 显示 二 维 关系 数据 和 排版 ， 
从 而 达到 页 面 整齐 和 美观 的 效果 。 而 表单 是 作为 客户 端 和 服务 器 交流 的 窗口 ， 可 以 获取 客户 端 
信息 ， 并 反馈 服务 器 端 信息 。 本 章 将 介绍 使 用 CSS3 样式 表 美 化 表格 和 表单 样式 的 方法 。 


11.1 表格 基本 样式 


在 传统 网 页 设计 中 ,表格 一 直 占 有 比较 重要 的 地 位 ， 用 来 对 网 页 排版 布局 。 基 本 上 每 个 网 
页 中 都 有 一 个 表格 来 布局 ， 它 可 以 帮助 设计 者 控制 网 页 布局 、 控 制 内 容 的 显示 等 。 使 用 表格 排 
版 网 页 可 以 使 网 页 更 美观 ， 条 理 更 清晰 ， 更 易于 维护 和 更 新 。 本 节 将 主要 介绍 如 何 使 用 CSS3 
设置 表格 边框 和 表格 背景 色 。 


11.1.1 ”表格 边框 样式 


在 显示 一 个 表格 数据 时 ,通常 都 带 有 表格 边框 ， 以 便 用 来 界定 不 同 单元 格 的 数据 。 当 table 
表格 的 描述 属性 border 值 大 于 0 时 显示 边框 ， 如 果 border 值 为 0， 则 不 显示 边框 。 边 框 显示 之 
后 ,可 以 使 用 CSS3 的 border 属 性 及 衍生 属性 和 border-collapse 属性 对 边框 进行 修饰 , 其 中 border 
属性 表示 对 边框 进行 样式 、 颜 色 和 宽度 设置 ， 从 而 达到 提高 样式 效果 的 目的 ， 这 个 属性 前 面 已 
经 介绍 过 了 ， 其 使 用 方法 与 前 面 一 模 一 样 ， 只 不 过 修饰 的 对 象 变换 了 。 

border-collapse 属性 主要 用 来 设置 表格 的 边框 是 否 被 合并 为 一 个 单一 的 边框 ， 还 是 像 在 标 
准 的 HTML 中 那样 分 开 显示 。 其 语法 格式 如 下 : 


border-collapse:separatelcollapse 


其 中 separate 是 默认 值 ， 表 示 边 框 会 被 分 开 ， 不 会 忽略 border-spacing 和 empty-cells 属 
性 ;而 collapse 属性 表示 边框 会 合并 为 一 个 单一 的 边框 ， 会 忽略 border-spacing 和 empty-cells 
属性 。 
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【 例 11.1】〔 实 例文 件 : chll\11.1.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 年 度 收 入 </title> 

<style> 

< -一 

.tabelistt{ 
border:1lpx solid #429fff;  /* 表格 边框 */ 
font-family: "楷体 "; 
border-collapse:collapse; /* 边框 重 辣 */ 

外 

.tabelist captiont{ 
padding-top:3px; /* 设 置 上 内 边 距 的 大 小 */ 
padding-bottom:2px; /* 设 置 下 内 边 距 的 大 小 */ 
font-weight:bolder; /* 设 置 字体 的 粗细 */ 
font-size:15px; /* 设 置 字体 的 大 小 */ 
font-family:" 幼 圆 "; /* 设置 文本 的 字体 */ 
border:2px solid #429fff;  /* 表格 标题 边框 */ 

有 

.tabelist th{ 
font-weight:bold; /* 设 置 字体 的 粗细 */ 
text-align:center; /* 设 置 段 落 居中 显示 */ 

; 

.tabelist tdf{ 
border:1lpx solid #429fff;  /* 单元 格 边框 */ 


text-align:right; /* 设 置 段落 靠 右 显示 */ 
padding:4px; /* 设 置 内 边 距 的 宽度 */ 
b 
--> 
</style> 
</head> 
<body> 


<table class="tabelist"> 

<caption class="tabelist"> 

2018 季 度 07-09 

</caption> 

<ErE> 

<th> 选 项 </th> 

<th>07 月 </th> 
<th>08 月 </th> 
<th>09 月 </th> 

</tr> 

<EE> 
<td> 收 入 </td> 
<td>8000</td> 
<td>9000</td> 
<td>7500</td> 

</tr> 

六 目下 > 
<td> 吃 饭 </td> 
<td>600</td> 
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<td>570</td> 
<td>650</td> 
=/ 
<tP> 
<td> 购 物 </td> 
<td>1000</td> 
<td>800</td> 
<td>900</td> 
</Ere> 
REE> 
<td> 买 衣服 </td> 
<td>300</td> 
<td>500</td> 
<td>200</td> 
< FEr> 
<tr> 
<td> 看 电影 </td> 
<td>85</td> 
<td>100</td> 
<td>120</td> 
</tr> 
<EE> 
<td> 买 书 </td> 
<td>120</td> 
<td>67</td> 
<td>90</td> 
/> 
</table> 
</body> 
</html> 


在 正 11.0 中 浏览 效果 如 图 11-1 所 示 , 可 以 看 到 表格 带 有 边框 显示 , 其 边框 宽度 为 1 像素 ， 
直线 显示 并 将 边框 进行 合并 ， 表 格 标题 “2018 季度 07-09” 也 带 有 边框 显示 ， 字 体 大 小 为 150 
像素 ,字体 类 型 是 幼 圆 并 加 粗 显示 ; 表格 中 每 个 单元 格 都 以 1 像素 直线 的 方式 显示 边框 并 将 显 
示 对 象 右 对 齐 。 


sy 口 x 
I 名 _DA 本 书 源 代码 \codeWj 禾 已 地 实 - 
| 后 年 度 履 入 x 回 
请 分 百度 下， 人 SEN0 关 


选项 07 月 08 月 09 月 


8000 7500 


图 11-1 表格 样式 修饰 


CSS3 美化 表格 和 表单 样式 第 )/ 齐 


的 


对 于 上 面 的 例子 ， 我 们 会 发 现 没有 使 用 HMTL 标记 中 的 border 设置 边框 , 而 是 使 用 CSS3 
属性 border 来 设置 table 边框 ， 这 样 做 可 以 在 不 同 浏览 器 上 显示 相同 样式 。 


11.1.2 ”表格 边框 宽度 


虽然 使 用 HIML 标记 的 描述 border 也 能 提高 表格 的 宽度 ， 但 我 们 还 是 推荐 使 用 CSS 属性 


设置 边框 宽度 ,如 使 用 border-width 对 边框 宽度 进行 设置 。 如 果 需 要 单独 设置 某 一 个 边框 宽度 ， 


则 


可 以 使 用 border-width 的 衍生 属性 设置 ， 如 border-top-width 和 border-left-width 等 。 


【 例 11.2】〔 实 例文 件 : ch11\11.2.html) 
<!DOCTYPE html> 


<html> 

<head> 

<title> 表 格 边 框 宽度 </title> 

<style> 

table{text-align:center; /* 设 置 居中 显示 */ 
width:500px; /* 设 置 表格 的 宽度 */ 


border-width:6px; /* 设 置 边框 的 宽度 */ 
border-style:double; /* 设 置 边框 的 样式 为 双 线 */ 
color:blue; /* 设 置 文本 的 颜色 */ 
} 
td{border-width:3px; /* 设 置 边框 的 宽度 */ 
border-style:dashed; /* 设 置 边框 的 样式 为 虚线 */ 
} 
</style> 
</head> 
<body> 
<table border=1 cellspacing="3" cellpadding="0"> 
<tr> 
<td> 姓 名 </td> 
<td class=tds> 性 别 </td> 
<td> 年 龄 </td> 
</tr> 
<EE> 
<td> 张 三 </td> 
<td> 男 </td> 
<td>31</td> 
</tr> 
< 
<td> 李 四 </td> 
<td> 男 </td> 
<td>18</td> 
证 说 
</table> 
</body> 
</html> 
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在 正 11.0 中 浏览 效果 如 图 11-2 所 示 ， 可 以 看 到 表格 带 有 边框 ， 宽 度 为 6 像素 ， 双 线 式 表 
示 ， 字 体 颜色 为 蓝 色 ， 单 元 格 边框 宽度 为 3 像素 ， 显 示 样 式 是 破 折线 式 。 


间 。 D:\ 本 书 源 代 码 vcode\ 源 | 图 ~ 人， 搜索. pp- ®@ 
筷 来 格 边框 完 度 x | 
户 各 百度 一 下 ,你 就 知道 


图 11-2 设置 表格 宽度 


11.1.3 ”表格 边框 颜色 

表格 颜色 设置 非常 简单 ， 通 常 使 用 CSS3 属性 color 设置 表格 中 文本 颜色 ， 使 用 
background-color 设置 表格 背景 色 。 如 果 为 了 突出 表格 中 的 某 一 个 单元 格 ， 还 可 以 使 用 
background-color 设置 某 一 个 单元 格 的 颜色 。 


【 例 11.3】 (实例 文件 : chll\11.3.html) 
<!DOCTYPE html> 


<html> 
<head> 
<title> 表 格 边 框 色 和 背景 色 </title> 
<style> 
a 
padding:0px; /* 设 置 内 边 距 的 大 小 */ 
margin:0px; /* 设 置 外 边 距 的 大 小 */ 
} 
body{ 
font-family:" 宋 体 "; /* 设 置 文 本 字体 样式 */ 
font-size:12px; /* 设 置 字体 大 小 */ 
} 
tablef{ 
background-color:yellow; /* 设 置 背景 颜色 为 黄色 */ 
text-align:center; /* 设 置 居中 显示 */ 
width:500px; /* 设 置 表格 宽度 */ 
border:1px solid green; /* 设 置 表格 边框 的 粗细 和 颜色 */ 
} 
tdf 
border:1px solid green; /* 设 置 单元 格 边框 的 粗细 和 颜色 */ 
height:30px; /* 设 置 单元 格 的 高 度 */ 
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line-height:30px; /* 设 置 行 高 的 大 小 */ 
} 
tdst{ 
background-color:#FFEl1FF; /* 设 置 单元 格 的 背景 颜色 */ 
上 
</style> 
</head> 
<body> 
<table cellspacing="3" cellpadding="0"> 
<tr> 
<td> 姓 名 </td> 
<td class=tds> 性 别 </td> 
<td> 年 龄 </td> 
<HEL> 
<tr> 
<td> 刘 天 翼 </tad> 
<td> 男 </td> 
<td>32</td> 
<AEr> 
<tr> 
<td> 刘 天 佑 </td> 
<td> 女 </td> 
<td>28</td> 
</tr> 
</table> 
</body> 
</html> 


在 正 11.0 中 浏览 效果 如 图 11-3 所 示 ， 可 以 看 到 表格 带 有 边框 ， 边 框 样式 显示 为 绿色 ， 表 


格 背 景色 为 黄色 ， 其 中 一 个 单元 格 背 景色 为 浅 紫色 。 


钱 “D:\ 本 书 源 代码 code\ 源 { 国 -~ 搜索.…. DP- 
| 局 志 8 这 民 色 篆 时 色 x 加 
兽 苗 百度 -下 , 你 Sx0 道 


图 11-3 设置 边框 背景 色 


11.2 CSS3 与 表单 


表单 可 以 用 来 向 Web 服务 器 发 送 数据 ， 特 别 是 经 常 被 用 在 主页 页 面 一 一 上 月 


日 户 输入 信息 然 
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后 发 送 到 服务 器 中 。 实 际 用 在 HTML 中 的 标记 有 <form>、<input>、<textarea>、<select> 和 
<option>。 本 节 将 使 用 CSS3 相关 属性 对 表单 进行 美化 。 


11.2.1 美化 表单 中 元 素 


表单 中 元 素 非 常 多 而 且 杂 乱 ， 如 input 输入 框 、 按 钮 、 下 拉 菜 单 、 单 选 按钮 和 复 选 框 等 。 
当 使 用 form 表单 将 这 些 元 素 排列 组 合 在 一 起 的 时 候 ， 其 单纯 的 表单 效果 非常 简陋 ， 这 时 设计 
者 可 以 通过 CSS3 相关 样式 控制 表单 元 素 输入 框 、 文 本 框 等 元 素 外 观 。 
在 网 页 中 ， 表 单元 素 的 背景 色 默认 都 是 白色 的 ， 因 为 这 样 的 背景 色 不 能 美化 网 页 ， 所 以 可 
以 使 用 颜色 属性 定义 表单 元 素 的 背景 色 。 定 义 表 单元 素 背 景色 可 以 使 用 background-color 属性 
定义 ， 这 样 可 以 使 表单 元 素 不 那么 单调 。 例 如 : 


input{ 
background-color:#ADD8E6; 
} 


上 面 代码 设置 了 input 表单 元 素 背景 色 ， 都 是 统一 的 颜色 。 


【 例 11.4】〔 实 例文 件 : chll\11.4.html) 

<!DOCTYPE html> 

<html> 

<head> 

<style> 

input{ /* 所 有 input 标 记 */ 
color:#cad9ea; 

} 

input.txt{ /* 文本 框 单独 设置 */ 
border:lpx inset #cad9ea; 
background-color:#ADD8E6; 

} 

input.btn{ /* 按钮 单独 设置 */ 
color:#00008B; 
background-color:#ADD8E6; 
border:lpx outset #cad9ea; 
padding:1lpx 2px lpx 2px; 

| 

select{ 
width:80px; 
color:#00008B; 
background-color:#ADD8E6; 
border:lpx solid #cad9ea; 

} 

textarea{ 
width:200px; 
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height:40px; 
color:#00008B; 
background-color:#ADD8E6; 
border:1lpx inset #cad9ea; 
} 
</style> 
</head> 
<body> 
<h3> 聊 天 室 注册 页 面 </h3> 
<table border="]1" width="45 当 "> 
<form method="post"> 
<tr><td width="30s"> 了 昵称 :</td><td><input class=txt>1 一 20 个 字符 <div 
id="qq"></div></td></tr> 
<tr><td> 密 码 :</td><td><input type="password" > 长 度 为 6~16 位 </td></tr> 
<tr><td> 确 认 密 码 :</td><td><input type="password" ></td></tr> 
<tr><td> 真 实 姓名 : </td><td><input name="username1"></td></tr> 
<tr><td> 性 别 :</td><td><select><option> 男 </option><option> 女 
</option></select></td></tr> 
<tr><td>E-mail 地 址 :</td><td><input value="sohu@sohu.com"></td></tr> 
<tr><td> 备 注 :</td><td><textarea cols=35 rows=10></textarea></td></tr> 
<tr><td><input type="button" value=" 提 交 " class=btn /></td><td><input 
type="reset"” value=" 重 填 "/></td></tr> 
</form> 
</table> 
</body> 
</html> 


在 下 11.0 中 浏览 效果 如 图 11-4 所 示 ， 可 以 看 到 表单 中 【了 昵称】 输入 框 、【 性 别 】 下 拉 杠 
和 【备注 】 文 本 框 都 显示 了 指定 的 背景 颜色 。 


本 ”DA 天书 源 代码 vodev 尖 | 图 ”此 | 控 本 - Dp- © 
夺 DA 丰 书 时 (NB\code\Rft.. < OD 
语 -下 , townE 


聊天 室 注册 页 面 


图 11-4 美化 表单 元 素 


HTML5+CSS3+jQuery MobiletBootstrap 开发 APP 从 入 门 到 精通 (视频 教学 版 


在 上 面 的 代码 中 ,首先 使 用 input 标记 选择 符 定义 了 input 表单 元 素 的 字体 输入 颜色 , 然后 


分 别 定义 了 两 个 类 (txt 和 btn) ，txt 用 来 修饰 输入 框 样式 ，btn 上 


来 修饰 按钮 样式 ， 最 后 分 别 


定义 了 select 和 textarean 的 样式 ， 其 样式 定义 主要 涉及 边框 和 背景 色 。 


11.2.2 ”美化 提交 按钮 


在 网 页 设计 中 ， 还 可 以 使 用 CSS 属性 来 定义 表单 元 素 的 边框 样式 ， 从 而 改变 表单 元 素 的 
显示 效果 。 例 如 可 以 将 一 个 输入 框 的 上 、 左 和 右边 框 去 掉 , 形成 一 个 与 签名 效果 一 样 的 输入 框 ， 


或 者 将 按钮 的 4 个 边框 去 掉 ， 只 剩 下 文字 超级 链接 一 样 的 按钮 。 


对 表单 元 素 边框 定义 ， 可 以 采用 border-style、border-width 和 border-color 及 其 衍生 属性 。 
如 果 要 对 表单 元 素 背 景色 进行 设置 ， 就 可 以 使 用 background-color， 其 中 将 值 设置 transparent 


(透明 色 ) 是 比较 常见 的 一 种 方式 。 示 例如 下 : 
background-color:transparent; /* 背景 色 透 明 */ 


【 例 11.5】“〈 实 例文 件 ， ch11\11.5.html) 


<!DOCTYPE html> 
<html> 
<head> 
<title> 表 单元 素 边 框 设 置 </title> 
<style> 
form{ 

margin:0px; 
padding:0px; 
font-size:14px; 
} 
input{ 

font-size:14px; 
font-family:" 幼 圆 "; 

} 
SE 


border-bottom:1lpx solid #005aa7; /* 下 画 线 效果 */ 


color:#005aa7; 
border-top:0px; border-left:0px; 
border-right:0px; 


background-color:transparent; /* 背景 色 透 明 */ 


= 


background-color:transparent; /* 背景 色 透 明 */ 


border:0px; /* 边框 取消 */ 
} 
</style> 
</head> 
<body> 


CSS3 美化 表格 和 表单 样式 ”第 ) 章 


<center> 

<h1> 签 名 页 </h1> 

<form method="post"> 

值班 主任 : <input id="name" class="t"> 

<input type="submit"” value=" 提 交 上 一 级 签名 >>" class="n"> 
</form> 

</center> 

</body> 

</html> 


在 正 11.0 中 浏览 效果 如 图 11-5 所 示 ， 可 以 看 到 输入 框 只 剩 下 一 个 下 边框 显示 ， 其 他 边框 
被 去 掉 了 ， 提 交 按 钮 也 只 剩 下 了 显示 文字 ， 常 见 的 矩形 形式 被 去 掉 了 。 


一 口 x 
辣 D:\ 本 书 源 代码 \code 详 图 ”| 搜索 -… 
| 局 表单 元 素 边框 设置 x 加 
请 贡 百度 一 下 ,你 知道 
签名 页 
值班 主任 : 刘 天 人 x ”提交 上 一 级 签名 >> 


图 11-5 表单 元 素 边框 设置 


在 上 面 代码 中 ,样式 表 中 定义 了 两 个 类 标识 符 t 和 n,t 用 来 设置 输入 框 显 示 样式 ， 此 处 设 
置 输入 框 的 左 、 上 、 下 3 个 边框 宽度 为 0， 并 设置 输入 框 输入 字体 颜色 为 浅 蓝 色 ， 下 边框 宽度 
为 1 像素 ， 直 线 样式 显示 ， 颜 色 为 浅 蓝 色 。 在 类 标识 符 n 中 ， 设 置 背 景色 为 透明 色 和 边框 宽度 
为 0， 这 样 就 去 掉 了 按钮 常见 的 矩形 样式 。 


11.2.3 ”美化 下 拉 菜 单 

在 网 页 设计 中 ， 有 时 为 了 突出 效果 会 对 文字 进行 加 粗 、 更 换 颜色 等 操作 ， 这 样 用 户 就 会 注 
意 到 这 些 重要 文字 。 同 样 ， 也 可 以 对 表单 元 素 中 的 文字 进行 这 样 的 修饰 ， 下 拉 菜 单 是 表单 元 素 
中 常用 的 元 素 之 一 ， 其 样式 设置 也 非常 重要 。 

CSS3 属性 不 仅 可 以 控制 下 拉 菜 单 的 整体 字体 和 边框 ， 还 可 以 对 下 拉 菜 单 中 的 每 一 个 选项 
设置 背景 色 和 字体 颜色 。 对 于 字体 设置 可 以 使 用 font 相关 属性 ， 如 font-size、font-weight 等 ; 
对 于 颜色 设置 可 以 采用 color 和 background-color 属性 。 


【 例 11.6】〔 实 例文 件 : ch11\11.6.html) 


<!DOCTYPE html> 
<html> 
<head> 
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<title> 美 化 下 来 菜单 </title> 

<style> 

.blue{ 
background-color:#7598FB; 
color: #000000; 
font-size:15px; 
font-weight:bolder; 
font-family:" 幼 圆 "; 

} 

.redf{ 
background-color:#E20A0A; 
Color: #ffffff; 
font-size:15px; 
font-weight:bolder; 
font-family:" 幼 圆 "; 

} 

-yellow{ 
background-color:#FFFF6F; 
color: #000000; 
font-size:15px; 
font-weight:bolder; 
font-family:" 幼 圆 "; 

J} 

.orangel{ 
background-color:orange; 
color:#000000; 
font-size:15px; 
font-weight:bolder; 
font-family:" 幼 圆 "; 


} 
</style> 
</head> 
<body> 
<form method="post"> 
<p><label for="color"> 选 择 暴雨 预警 信号 级 别 :</1label> 
<select name="color" id="color"> 
<option value=""> 请 选择 </option> 
<option value="blue" class="blue"> 暴 雨 蓝 色 预 警 信号 </option> 
<option value="yellow" class="yellow"> 暴 雨 黄色 预警 信号 </option> 
<option value="orange" class="orange"> 暴 雨 橙色 预警 信号 </option> 
<option value="red" class="red"> 暴 雨 红 色 预 警 信号 </option> 
</select></p> 
<p><input type="submit" value=" 提 交 "></p> 
</form> 
</body> 
</html> 


在 正 11.0 中 浏览 效果 如 图 11-6 所 示 , 可 以 看 到 下 拉 菜 单 中 每 个 菜单 项 显示 不 同 的 背景 色 。 
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这 种 方式 显示 选项 会 提高 人 的 注意 力 ， 减 少 犯错 的 机 会 。 
在 上 面 代码 中 设置 了 4 个 类 标识 符 ， 用 来 对 应 不 同 的 菜单 选项 。 其 中 每 个 类 中 都 设置 了 选 
项 的 背景 色 、 字 体 颜色 、 大 小 和 字体 。 


= [= x 
外 ”DA 本 书 源 代码 Yode 刘 便 ~ 搜索 
后 美化 下 订 芋 间 x 区 
坪 各 二 度 一 下 , 你 0 首 


选择 暴雨 预警 信号 级 别 : 


提交 


图 11-6 设置 下 拉 菜单 样式 


11.3 ”综合 实例 1 一 一 隔行 变色 


当 使 用 表格 显示 大 量 数据 的 时 候 ， 由 于 表格 的 行 和 列 比较 多 ， 如 果 单 元 格 采用 相同 的 背景 
色 ， 用 户 在 查看 数据 时 就 会 感到 非常 凌乱 ， 很 容易 出 错 。 通 常 的 解决 办 法 就 是 采用 隔行 变色 ， 
使 得 奇数 行 和 偶数 行 的 背景 色 不 同 ， 从 而 达到 数据 一 目 了 然 的 效果 。 本 节 将 结合 前 面 学 习 的 知 
识 ， 创 建 一 个 隔行 变色 实例 ， 具 体操 作 步 又 如 下 : 


分析 需 求 。 


如 果 要 实现 表格 隔行 变色 ， 首 先 需要 创建 一 个 表格 并 定义 其 显示 样式 ， 然 后 设置 其 奇数 行 
和 偶然 行 显示 的 颜色 。 


I@O3 创建 HIML 页 面 ， 实 现 基本 table 表格 。 


<!DOCTYPE html> 
<html> 

<head> 
<title> 隔 行 变色 </title> 
</head> 

<body> 

<h1> 设 计 优 雅 数 据 表格 </h1> 
<table border=1> 

<tr> 

<th> 排 名 </th> 
<th> 姓 名 </th> 
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<th> 总 分 </th> 

<th> 语 文 </th> 

<th> 数 学 </th> 

</tr> 

<tr><td>1</td><td> 孔 宇 </td><td>180</td><td>91</td><td>89</td></tr> 
<tr><td>2</td><td> 曹 圆 新 </td><td>176</td><td>76</td><td>100</td></tr> 
<tr><td>3</td><td> 史 雅 琪 </td><td>168</td><td>83</td><td>85</td></tr> 
<tr><td>4</td><td> 曹 秀 英 </td><td>153</td><td>73</td><td>80</td></tr> 
<tr><td>5</td><td> 杨 青 </td><td>146</td><td>70</td><td>76</td></tr> 
</table> 

</body> 

</html> 


在 正 11.0 中 浏览 效果 如 图 11-7 所 示 ， 可 以 看 到 页 面 中 显示 了 一 个 表格 ， 其 字体 、 边 框 等 
都 是 默认 设置 。 


L 国 添加 CSS 代码 ， 设 置 标题 和 表格 基本 样式 。 


<style> 

hl{font-size:16px;} /* 设 置 标题 字体 大 小 */ 

table{ 
width:100%; 
font-size:12px; /* 设 置 表格 字体 大 小 */ 
table-layout:fixed; /* 设 置 表格 布局 样式 */ 
empty-cells:show; /* 绘 制 单元 格 的 边框 */ 
border-collapse:collapse; /* 边 框 合并 */ 
margin:0 auto; /* 设 置 外 边框 的 样式 */ 
border:1px solid #cad9ea; /* 设 置 边框 的 边框 粗细 和 颜色 */ 
color:#666; /* 设 置 字体 颜色 */ 

| 

</style> 


此 样式 中 ,设置 了 标题 字体 大 小 为 16 像素 ， 表 格 字体 大 小 为 12 像素 ， 边 框 合并 ， 边 框 大 
小 为 1 像素 直线 显示 等 。 其 中 empty-cells 属性 设置 是 否 显示 表格 中 的 空 单元 格 〈 仅 用 于 “分 
离 边框 ”模式 ) ，show 表示 显示 ，hidden 表示 隐藏 。table-layout:fixed 语句 表示 表格 的 水 平 布 
局 是 仅仅 基于 表格 的 宽度 ， 表 格 边框 的 宽度 、 单 元 格 间距 、 列 的 宽度 均 与 表格 内 容 无 关 。 

在 正 11.0 中 浏览 效果 如 图 11-8 所 示 ， 可 以 看 到 页 面 中 显示 了 一 个 表格 ， 其 大 小 充满 了 整 
个 页 面 ， 边 框 大 小 显示 为 浅 蓝 色 。 


CSS3 美化 表格 和 表单 样式 ”第 1)) 齐 


| ee ET 一 口 X 
Qs ee -0 | 要- 后 [3 DY 本 书 源 人 到 vode 节 国 ~ 四 | 搜索 .. 1 
底下, tn | 名 后 5 色 x 加 
a 间 从 百 度 一 下 ,你 Si 和 和 
设计 优雅 数据 表格 
设计 优雅 数据 表格 
于 权 [区 | 芒 人 全 对 雪琴 所 可 音节 语文 | 如 
1 上 已 字 ]bso jel lise 1 180 | |s9 
| 异 圆 饮 76 jz6_ jaoo 2 176 [re lioo 
B_][ 归 雅 天 6s js3 js5 3 168 3 ]s5 
4 _j[ 曹 秀 计 [153 js jlso 4 153 73 so 
6 | 号 吉 ]h46 Jfro je 5 146 四 四 
图 11-7 设置 table 表格 图 11-8 设置 表格 和 标题 样式 


图 添加 CSS 代码 ， 修 饰 志和 也 单元 格 。 


tht{ 
height:30px; 
overflow:hidden; 

} 

td{height:20px;} 

td, th{ 
border:1lpx solid #cad9ea; 
padding:0 lem 0; 

} 


在 正 11.0 中 浏览 效果 如 图 11-9 所 示 ， 可 以 看 到 表格 中 单元 格 高 度 加 大 ，td 增加 到 20 像 
也 增加 到 30 像素 。 单 元 格 还 带 有 边框 显示 ， 大 小 为 1 像素 ， 直 线 样式 ， 颜 色 为 浅 蓝 色 。 


[加 添加 CSS 代码 ， 实 现 隔行 变色 。 


tr:nth-child(even){ 
background-color:#FFD39B; 
} 


在 这 里 使 用 了 结构 伪 类 标识 符 实现 了 表格 的 隔行 变色 。 
在 正 11.0 中 浏览 效果 如 图 11-10 所 示 ， 可 以 看 到 表格 中 奇数 行 显示 浅 蓝 色 。 


| - 0O x - 0O x 
@ 局“Dx\ 本 书 源 代 码 code\i 国 ”| 搜索 . 月 轨 D:\ 李 书 源 代 码 \codej 图 ”| 搜索 .. 只 
三 隔行 交 色 x* 匡 后 隔行 交 色 x* 回 

育 名 二 度 下, 你 M0 道 这 EE 度 - 下 , 你 9 道 

设计 优雅 数据 表格 设计 优雅 数据 表格 

排名 [BB 人 | 语文 | 至 学 

1 iso le1 |s9 

2 |178 [6 lio0 

3 es ss |s5 

4 |153 [73 [so 

5 ss 四 | 四 

图 11-9 设置 单元 格 样式 图 11-10 隔行 变色 显示 
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11.4 综合 实例 2 一 一 表格 图 文 网 页 布局 


文字 和 图 片 等 对 象 的 定位 是 网 页 设计 中 的 难点 ， 利 用 表格 布局 网 页 结构 是 一 种 非常 重要 ， 
也 是 最 为 常用 的 方法 ， 同 时 也 是 网 页 设计 的 重点 。 通 过 单元 格 可 以 对 文本 或 图 片 进行 定位 ， 以 
达到 布局 整齐 。 本 实例 将 结合 前 面 学 习 的 知识 ， 实 现 通 过 表格 对 图 片 和 文字 进行 布局 ， 具 体操 
作 步 又 如 下 : 


L@ 国 分 析 需 求 。 


使 用 表格 进行 排版 ， 需 要 先 确定 是 图 文 竖 排 还 是 横 排 ， 这 样 才能 确定 图 片 的 放置 位 置 (如 
果 采 用 竖 排 ， 则 可 以 在 表格 的 第 一 行 放置 图 片 ， 对 应 的 下 面 放置 文字 介绍 ) ， 然 后 使 用 CSS 
样式 对 图 片 、 文 字 和 表格 进行 设置 。 


t@ 到 创建 HTML 页 面 ， 实 现 表格 基本 样式 。 


<!DOCTYPE html> 
<html> 
<head> 
<title> 无 标题 文档 </title> 
</head> 
<body> 
<table align=center border="]1" cellspacing="4" cellpadding="0"> 
<tr> 
<td><img src="8.jpg"/><p> 时 尚 大 玩具 ! 车 展 前 实 拍 路 虎 极光 coupe 
</p> 
</td> 
<td><img src="6.jpg"/><p> 充 满 活力 的 小 家 伙 上 海 车 展 体验 奥迪 Q3 
</p></td> 
</tr> 
CE> 
<td> 路 虎 总 是 以 硬汉 的 形象 出 现在 人 们 面前 </tad> 
<td> 奥 迪 将 推出 入 门 级 SUV 车 型 奥迪 Q3 时 ， 大 家 都 自然 而 然 的 觉得 这 款 车 型 是 和 宝马 X1 竞 争 的 
产品 </td> 
</tr> 
<tr> 
<td> 全 景 天 窗 已 经 成 为 中 高 端 SUV 的 流行 趋势 </td> 
<tqd> 奥 迪 Q3 相 比 两 位 兄长 有 简化 也 有 复杂 化 </tqd> 
和 人 > 
</table> 
</body> 
</html> 


上 面 网 页 代码 创建 了 一 个 表格 ， 表 格 第 一 行 分 别 放置 两 种 图 片 ， 下 面 两 行 放 置 文字 。 
在 正 11.0 中 浏览 效果 如 图 11-11 所 示 ， 可 以 看 到 显示 了 一 个 表格 ， 表 格 中 包含 了 两 张 图 片 。 
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1@ 到 添加 CSS 代码， 修饰 全 局 样式 和 表格 。 


<style> 
| 
padding:0px; /* 设 置 内 边 距 的 大 小 */ 
margin:0px; /* 设 置 外 边 距 的 大 小 */ 
} 
table{ 
font-family:" 幼 圆 "; /* 设 置 文本 的 字体 样式 */ 
text-align:center; /* 设 置 居 中 显示 */ 
margin:10px 0 0 30px; /* 设 置 表格 的 外 边 距 */ 


background-color:#CCddcc; /* 设 置 表格 的 背景 颜色 */ 
border-color:#0099ff; /* 设 置 表格 的 边框 颜色 */ 


width:400px; /* 设 置 表格 的 宽度 */ 
font-size:15px; /* 设 置 文字 的 大 小 */ 
</style> 


通过 上 面 的 代码 即 可 创建 一 个 table 标记 选择 器 ， 该 选择 器 设置 了 字体 样式 和 背景 样式 。 
在 正 11.0 中 浏览 效果 如 图 11-12 所 示 ， 可 以 看 到 显示 了 一 个 表格 ， 其 背景 色 为 绿色 ， 字 
体 居 中 对 齐 ， 表 格 边框 为 浅 蓝 色 。 


on 口 x 
和 D\ 书 深 t 罗 \code 迟 帮 ”中 | 搜索 只- 
o x | | 号 Anus 
《 全 TT RES 5 ©| | ane 


痪 3- 下 bbnE 


实 拍 :路虎 极光 体验 :奥迪 Q3 


实 拍 ;路虎 极 光 


村 沿 太 玩 具 ! 车展 出 实地 | 抱 光 活 力 的 小 家 伙 上 海 车 展 体验 奥迪 03 


咯 虎 极光 Coupe 


全 大 家 守 自负 外 的 觉得 六 和 
将 开 人 大 下 机 页 他 古诗 天 康 Fr 时 ， 大 家 都 自然 而 然 的 觉得 这 款 车 
"| A 外 是 和 家 局 X1 帝 争 的 产品 


4 | 隐 iaqs 相 比 西 位 兄长 有 简化 也 有 复杂 化 


匡 在 总 臣 以 硬汉 玖 形 农 1 
岗 i 


图 11-11 创建 基本 table 图 11-12 CSS 修饰 table 


国 弛 添加 CSS 代码 ， 修 饰 行 tt 和 单元 格 td。 


EE 
height:30px; /* 设 置 表格 的 行 高 */ 
line-height:30pzx; /* 设 置 文 字 行 高 */ 
} 
Ef 
width:200px; 
} 
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上 面 代码 首先 定义 了 table 行 的 高 度 和 文字 行 高 ， 然 后 定义 了 单元 格 宽度 。 
在 正 11.0 中 浏览 效果 如 图 11-13 所 示 ， 可 以 看 到 显示 表格 相 比 较 于 上 一 个 图 像 ， 其 表格 
高 度 增加 ， 行 高 增加 。 


看”Da 本 书 且 fiVcode 汪 图 - 号 | 按 索 Pp 
局 无 村 可 文革 x | 
部下 En 


充 泣 活 力 的 小 家 伙 上 海 车 展 


时 尚 大 玩具 ! 车 展 前 实 拍 路 


虎 极光 Coupe 体验 奥迪 03 
奥迪 将 推出 入 门 级 SUV 车 型 奥 
路 虎 总 是 以 硬汉 的 形象 出 现 || 迪 93 时 ， 大 家 都 自然 而 然 的 
在 人 们 面前 觉得 这 款 车 型 是 和 宝马 Xl 况 
争 的 产品 


全 景 天 窗 已 经 成 为 中 高 端 SUv| | 奥迪 93 相 比 两 位 兄长 有 简化 
的 流行 趋势 也 有 复杂 化 


图 11-13 设置 行 高 


11.5 ”综合 实例 3 一 一 变色 表格 


如 果 长 时 间 浏 览 大 量 数据 和 浏览 表格 ,即使 使 用 了 隔行 变色 的 表格 ,阅读 时 间 长 了 仍然 会 
感到 疲劳 。 如 果 数 据 行 能 动态 根据 鼠标 悬浮 来 改变 颜色 ， 就 会 使 页 面 充满 动态 效果 ， 组 解 用 户 
的 疲劳 感 。 

本 实例 将 结合 前 面 学 习 的 知识 ， 创 建 一 个 鼠标 悬浮 的 变色 表格 ， 有 具体 操作 步骤 如 下 : 


[0 和 分 析 需 求 。 


首先 需要 建立 一 个 表格 ， 所 有 行 的 颜色 不 单独 设置 ， 统 一 采用 表格 本 身 的 背景 色 ， 然 后 通 
过 CSS 设置 可 以 实现 该 效果 。 


四 2 创建 HTML 网 页 ， 实 现 table 表格 。 


<!DOCTYPE html> 

<html> 

<head> 

<title> 变 色 表 格 </title> 

</head> 

<body> 

<table border="0" cellpadding="0" cellspacing="1"> 
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<caption> 
唐 宋 八大 家 
</caption> 
> 
<th> 姓 名 </th> 
<th> 作 品 </th> 
< 
<tr class="hui"> 
<td> 韩 愈 </td> 
<td> 原 道 </td> 
</tr> 
<tr> 
<td> 柳 宗 元 </td> 
<td> 三 戒 </td> 
由 让 
<tr class="hui"> 
<tqd> 欧 阳 修 </td> 
<tq> 醇 俩 享 记 </td> 
二 
<tr> 
<td> 苏 淘 </td> 
<td> 六 国 论 </td> 
< > 
<tr class="hui"> 
<td> 苏 轼 </td> 
<td> 水 调 歌 头 </td> 
</tr> 
KEFE> 
<td> 苏 略 </td> 
<tqd> 栾 城 集 </tqd> 
</tr> 
<tr class="hui"> 
<td> 曾 巩 </td> 
<td> 上 欧阳 伟人 书 </td> 
</tr> 
EE 
<td > 王安石 </td> 
<td> 伤 仲 永 </td> 
</tr> 
</table> 
</body> 
</html> 


在 正 11.0 中 浏览 效果 如 图 11-14 所 示 ， 可 以 看 到 表格 不 带 边框 ， 字 体 等 都 是 默认 显示 。 


[03j 添加 CSS 代码 ， 修 饰 table 表格 和 单元 格 。 


<style type="text/css"> 
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tablef{ 
width:600px; 
margin-top:0px; 
margin-right:auto; 
margin-bottom: Opx; 
margin-left:auto; 
text-align:center; 
background-color:#000000; 
font-size:9pt; 


taf 


padding:S5px; 
background-color:#FFFFFF; 


</style> 


在 正 11.0 中 浏览 效果 如 图 11-15 所 示 , 可 以 看 到 表格 带 有 边框 , 行内 字体 居中 显示 , 但 列 
标题 背景 色 为 黑色 ， 其 中 字体 不 能 够 显示 。 


| - 口 x - 0O x 
| 知 D:\ 不 书 深 代码 \codeW 国 ”局 | 搜索 可 DAE 书 深 f 隔 vode\ 涯 ft 三 kh 因 ”中 控 家 DP- ®@ 
后 去 色 字 隐 x 回 6 ws 可 
次 当下 区 -下 ,bat 王 部 和 EE- 下 ,fr 
唐宁 八大 家 


唐 宋 八大 家 TEFS 
品 有 


正安 石 伤 仲 永 ce 


图 11-14 创建 基本 表格 图 11-15 设置 table 样式 
人 @ 绚 添加 CSS 代码 ， 修 饰 标题 。 


caption{ 
font-size:36px; 
font-family:" 黑 体 ", "宋体 "; 
padding-bottom:15px; 


trf{ 
font-size:13px; 
background-color:#cad9ea; 
color:#000000; 

|; 

th{ 
padding:5px; 

; 

-hui tdf{ 
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background-color:#f5fafe; 
js 


上 面 代码 中 使 用 了 类 选择 器 hui， 来 定义 每 个 td 行 所 显示 的 背景 色 ， 此 时 需要 在 表格 中 每 
个 奇数 行 都 引入 该 类 选择 器 。 例 如 <tr class="hui"> 从 而 设置 奇数 行 背 景色 ， 这 与 第 一 个 综合 实 
例 中 对 奇数 行 背 景色 的 设置 方式 是 不 一 样 的 。 

在 正 11.0 中 浏览 效果 如 图 11-16 所 示 ， 可 以 看 到 一 个 表格 中 列 标题 一 行 背 景色 显示 为 浅 
蓝 色 ， 并 且 表 格 中 奇数 行 背景 色 为 浅 灰 色 ， 而 偶数 行 背 景色 显示 为 默认 白色 。 


L 国 添加 CSS 代码， 实现 鼠标 是 浮 变 色 。 


tr:hover tdf{ 
background-color:#FF9900; 


在 下 11.0 中 浏览 效果 如 图 11-17 所 示 , 可 以 看 到 当 鼠 标 放 到 不 同行 上 时 背景 色 会 发 生 改变 。 


5 0 Xx 
Dv/elNcode VRENh 全 可 万 - ®| | CT 。 口 | E 万 - ® 
EF 加 | ae 
PED = 冯 -下 foo 
唐 宋 八大 家 
[3 [了 
[3 [nn 
全 守 元 Fy 
欧阳 做 赃 茹 牵 记 
i A 
WR 水 二 加 类 | Ey 水 调 殉 头 
2 县 来 城 人 | EE | 宙 坟 人 
TI Wn rer 
二 家 有 伤 促 永 王安石 伤 促 未 
图 11-16 设置 奇数 行 背景 色 图 11-17 鼠标 悬浮 改变 颜色 


11.6 ”综合 实例 4 一 一 登录 表单 


在 网 页 设计 时 , 构建 一 个 登录 表单 是 十 分 常见 的 事情 。 登 录 表单 在 验证 用 户 时 扮演 着 重要 
的 角色 ， 可 以 保护 一 些 敏感 数据 不 被 非法 用 户 访问 。 设 计 和 构建 登录 表单 时 ， 尽 量 使 其 简单 ， 
并 且 避 免 将 一 个 表单 用 于 多 个 任务 。 

本 实例 将 结合 前 面 学 习 的 知识 ， 创 建 一 个 简单 的 登录 表单 ， 具 体操 作 步 又 如 下 : 


[ 国 分 析 需 求 。 


创建 一 个 登录 表单 ， 需 要 包含 三 个 表单 元 素 : 一 个 名 称 输入 框 、 一 个 密码 输入 框 和 两 个 按 
钮 ， 然 后 添加 一 些 CSS 代码 对 表单 元 素 进行 修饰 。 
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四 8 创建 HIML 网 页 ， 实 现 表单 。 


<!DOCTYPE html> 

<html> 

<head> 

<title> 用 户 登录 </title> 

<body> 

<div> 

<h1> 用 户 登录 </h1> 

<form action="" method="post"> 

姓名 : <input type="text" id=name/> 

密码 : <input type="password" id=password/> 
<input type=submit value=" 提 交 " class=button> 
<input type=reset value=" 重 置 " class=button> 
</form> 

</div> 

</body> 

</html> 


在 上 面 代码 中 创建 了 一 个 div 层 ， 用 来 包含 表单 及 其 元 素 。 
在 焉 11.0 中 浏览 效果 如 图 11-18 所 示 ， 可 以 看 到 显示 了 一 个 表单 ， 其 中 包含 两 个 输入 框 
和 两 个 按钮 ， 输 入 框 用 来 获取 姓名 和 密码 ， 按 钮 分 别 为 【提交 】 和 【 重 置 】。 


[0 添加 CSS 代码， 修饰 标题 、 层 、 输 入 框 和 按钮 。 


<style> 
hi{ 
font-size:20px; 
} 

divt{ 
width:200px; 
padding:1lem 2em 0 2em; 
font-size:12px; 

} 

#name, #password{ 
border:1lpx solid #ccc; 
width:160px; 
height:22px; 
padding-left:20px; 
margin:6px 0; 
line-height:20px; 

.button{margin:6px 0;} 

</style> 


在 正 11.0 中 浏览 效果 如 图 11-19 所 示 , 可 以 看 到 标题 变 小 ,并且 密码 输入 框 换 行 显示 , 布 
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局 比 原来 更 加 美观 合理 。 
二 - D x 
姑 ”D\ 本 书 深 代码 \code\ 软 代码 \ 国 ”地 | 投 索 - -2 J © | 国 “D 本 书 尖 人 得 Ncode 洒 国 ”中 | 要 索 .… 
局 Ra x 蕊 |§ Pa x 加 
蘑 尖 百度 一下 ,你 和 知 下 户 委 百 度 一 下 ,你 各 知 利 
用 户 登 录 用 户 登 录 
姓名 : 密码 ; 3 [E 姓名 
密码 : 
提交 | | 重 轩 
图 11-18 创建 登录 表单 图 11-19 登录 表单 最 终 效 果 


上 面 代码 中 ， 设 置 了 标题 大 小 为 20 像素 ，div 层 宽度 为 200 像素 ， 层 中 字体 大 小 为 12 像 
素 ， 输 入 框 长 度 变 短 ， 输 入 框 边框 变 小 ， 并 且 表 单元 素 之 间距 离 增 大 ， 页 面 布局 更 加 合理 。 


11.7 ”综合 实例 5 一 一 注册 表单 


不 管 是 在 线 交易 验证 、 评 论 新 文章 , 还 是 管理 某 个 应 用 ，Web 表单 总 会 出 现在 人 们 的 视线 
中 。 在 网 页 上 ，Web 表单 把 用 户 、 信 息 、Web 产品 或 服务 连接 了 起 来 ， 它 们 能 促进 销售 、 捕 捉 
用 户 行为 、 建 立 沟通 与 交流 。 

本 实例 中 ， 将 使 用 表单 内 的 各 种 元 素来 开发 一 个 网 站 的 注册 页 面 ， 并 用 CSS 样式 来 美化 
这 个 页 面 效 果 。 具 体操 作 步 又 如 下 : 


[0 出 分 析 需 求 。 


注册 表单 通常 包含 三 个 部 分 : 在 页 面 上 方 给 出 标题 ; 标题 下 方 是 正文 部 分 ( 即 表单 元 素 ) ; 
最 下 方 是 表单 元 素 提交 按钮 。 在 设计 这 个 页 面 时 ， 需 要 把 “用 户 注册 ”标题 设置 成 hl 大 小 ， 
正文 使 用 p 来 限制 表单 元 素 。 


[0 构建 HTML 页 面 ， 实 现 基 本 表单 。 


<!DOCTYPE html> 

<html> 

<head> 

<title> 注 册页 面 </title> 

</head> 

<body> 

<hl align=center> 用 户 注册 </h1> 
<form method="post"> 
<p> 姓 gnbsp; gnbsp; gnbsp; gnbsp; 名 : 
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<input type="text" class=txt size="12" maxlength="20" name="username" /> 
</p><p> 性 gnbsp; gnbsp; gnbsp; gnbsp; 别 : 

<input type="radio" name=" 性 别 " value="male"/> 男 

<input type="radio" name=" 性 别 " value="female"/> 女 

</p><p> 年 &nbsp;snbsp;gnbsp;snbsp; 龄 : 

<input type="text" class=txt name="age"/> 


</p> 

<p> 联 系 电话 : 

<input type="text" class=txt name="tel"/> 
</p><p> 电 子 邮 件 : 

<input type="text" class=txt name="email"/> 
</p><p> 联 系 地 址 : 

<input type="text" class=txt name="address"/> 
</p> 

<p> 


<input type="submit" name="submit" value=" 提 交 " class=but/> 
<input type="reset" name="reset" value=" 清 除 " class=but/> 
</p> 

</form> 

</body> 

</html> 


在 正 11.0 中 浏览 效果 如 图 11-20 所 示 , 可 以 看 到 创建 了 一 个 注册 表单 ,包含 一 个 标题 【用 
户 注 册 】、【 姓 名 】、【 性 别 】、【 年 龄 】、【 联 系 方式 】、【 电 子 邮 件 】、【 地 址 】 等 输入 
框 和 【提交 】 按 钮 等 ， 其 显示 样式 为 默认 样式 。 


03) 添加 CSS 代码 ， 修 饰 全 局 样式 和 表单 样式 。 


<style> 

中 
padding:0px; 
margin:0px; 
} 

body{ 
font-family: "宋体"; 
font-size:12px; 
} 

form{ 
width:300px; 
margin:0 auto 0 auto; 
font-size:12px; 
color:#999; 

} 

</style> 


在 正 11.0 中 浏览 效果 如 图 11-21 所 示 , 可 以 看 到 页 面 中 字体 变 小 , 其 表单 元 素 之 间距 离 也 
变 小 。 


CSS3 美化 表格 和 表单 样式 ”第 儿 章 
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DA 天 fode 吕 国 ”| 迫 案 - 


部 各 下 ,fx 


用 户 注册 

姓 名: 

性 别 。O 男 O 女 

年 。 龄 : 

联系 电话 : 

电子 邮件 : 

联系 地 址 : 

提交 清除 
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乱 注册 页 面 x 四 
音 全 百度 一 下 ， 你 就 知道 


日 x 


用 户 注册 
GOK 


图 11-20 注册 表单 显示 


图 11-21 CSS 修饰 表单 样式 


人 @ 细 添加 CSS 代码 ， 修 饰 段 落 、 输 入 框 和 按钮 。 


form p{ 
margin:5px 0 0 Spx; 


} 


otxtt 
width:200px; 


background-color:#CCCCFF; 
border:#6666FF lpx solid; 


text-align:center; 


Color:#0066FF; 


} 


.but{ 
border:0px#93bee2solid; 


border-bottom:#93bee21pxsolid; 
border-left:#93bee21pxsolid; 
border-right:#93bee21lpxsolid; 
border-top:#93bee21pxsolid;*/ 
background-color:#3399CC; 


cursor:hand; 
font-style:normal; 
color:#cad9ea; 


} 


在 正 11.0 中 浏览 效果 如 图 11-22 所 示 , 可 以 看 到 表单 元 素 有 背景 色 , 其 输入 字体 颜色 为 蓝 
色 ， 边 框 颜色 为 浅 蓝 色 ， 按 钮 有 边框 ， 按 钮 上 字体 颜色 为 浅 色 。 


HTML54CSS3+jQvuery Mobilet+Bootstrap 开发 APP 从 入 门 到 精通 (视频 教学 版 
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用 户 注 册 


图 11-22 设置 输入 框 和 按钮 样式 


11.8 专家 解 惑 


1. 构建 一 个 表格 需要 注意 哪些 方面 ? 


在 HTML 页 面 中 构建 表格 框架 时 ， 应 该 尽量 遵循 表格 的 标准 标记 ， 养 成 良好 的 编写 习惯 ， 


并 适当 利用 tab、 空 格 和 空 行 来 提高 代码 的 可 读 性 ， 从 而 降低 后 期 维护 成 本 。 特 别 是 使 
表格 来 布局 一 个 较 大 的 页 面 时 ， 需 要 在 关键 位 置 加 上 注释 。 


2. 在 使 用 表格 时 会 发 生 一 些 变形 ， 这 是 什么 原因 引起 的 呢 ? 


j table 


很 可 能 是 因为 更 改 分 辩 率 造成 的 ， 例 如 在 800X 600 的 分 辩 率 下 ， 一 切 正常 ， 而 到 了 1024 


X800 时 ， 则 多 个 表格 或 者 有 的 居中 ， 有 的 却 左 排列 或 右 排列 。 


表格 有 左 、 中 、 右 三 种 排列 方式 ， 如 果 没 特别 进行 设置 ， 则 默认 为 居 左 排列 。 在 800 X 600 
的 分 辨 率 下 表格 恰好 就 有 编辑 区 域 那么 宽 ， 不 容易 察觉 ， 而 到 了 1024X 800 的 时 候 ， 就 发 生 了 


变形 。 解 决 的 办 法 比较 简单 ， 即 都 设置 为 居中 、 居 左 或 居 右 。 
3. 使 用 CSS 修饰 表单 元 素 时 ， 采 用 默认 值 好 还 是 指定 好 ? 


各 个 浏览 器 之 间 显 示 的 差异 ， 其 中 一 个 原因 就 是 各 个 浏览 器 对 部 分 CSS 属性 的 默认 值 不 


同 导 致 的 ， 通 常 的 解决 办 法 就 是 指定 该 值 ， 而 不 让 浏览 器 使 用 默认 值 。 
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一 个 网 页 如 果 都 是 文字 ， 时 间 长 了 会 让 浏览 者 感到 很 枯燥 ， 而 一 张 恰如其分 的 图 片 ， 会 给 
网 页 带 来 许多 生 趣 。 图 片 是 直观 、 形 象 的 , 一 张 好 的 图 片 会 给 网 页 带 来 很 高 的 点 击 率 。 在 CSS3 
中 ， 定 义 了 很 多 属性 来 美化 和 设置 图 片 。 


12.1 ”图片 样式 


如 果 将 多 张 图 片 直接 放置 到 网 页 中 ， 而 不 加 以 修饰 ， 会 给 人 一 种 凌乱 的 感觉 。 通 过 CSS3 
属性 统一 管理 ， 可 以 定义 多 张 图 片 的 各 种 属性 ， 如 图 片 边框 、 图 片 缩放 。 


12.1.1 图 片 边框 


在 网 页 中 放置 一 张 图 片 ， 可 以 使 用 <img> 标 记 ， 在 第 2 章 中 已 经 介绍 过 了 。 当 图 片 显示 之 
后 ， 其 边框 是 否 显示 可 以 通过 <img> 标 记 中 的 描述 属性 border 来 设置 。 其 代码 如 下 : 


<img src="yueji.jpg" border="3"> 


通过 HTML 标记 设置 图 片 边框 ， 其 边框 显示 都 是 黑色 并 且 风 格 比较 单一 ， 唯 一 能 够 设置 
的 就 是 边框 的 粗细 ， 而 对 边框 样式 基本 上 是 无 能 为 力 。 这 时 可 以 采用 CSS3 对 边框 样式 进行 
美化 。 

在 CSS3 中 ， 使 用 border-style 属性 定义 边框 样式 ， 即 边框 风格 。 例 如 可 以 设置 边框 风格 
为 点 线 式 边框 (dotted)、 破 折线 式 边 框 (dashed)、 直 线 式 边框 (solid)、 双 线 式 边框 (double) 
等 。 

【 例 12.1】 (实例 文件 : ch12\12.1.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 图 片 边框 </title> 

</head> 

<body> 

<img src="yueji.jpg" border="3" style="border-style:dotted"> 
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<img src="yueji.jpg" border="3" style="border-style:dashed"> 
</body> 
</html> 


在 下 11.0 中 浏览 效果 如 图 12-1 所 示 ， 可 以 看 到 网 页 显示 了 两 张 图 片 ， 其 样式 分 别 为 点 线 
式 和 破 折线 。 


品 


© Dee ode\ mrehOG\G Thtml 轩 -CG a p- © 

|5 ew 
文件 (F) 篇 迄 (E) 查看 (V) 收 总 夫 IA) 工具 (T) 雪 荔 (H) 
请 ER 下 , {ranE 


图 12-1 


另外 ， 如 果 需 要 单独 定义 边框 一 边 的 样式 ， 可 以 使 用 border-top-style 设置 上 边框 样式 、 
border-right-style 设置 右边 框 样式 、border-bottom-style 设置 下 边框 样式 和 border-left-style 设置 
左边 框 样式 。 


【 例 12.2】〔 实 例文 件 ， ch12\12.2.html) 

<!DOCTYPE html> 

<html> 

<head> 

<title> 图 片 边框 </title> 

</head> 

<body> 

<img src="yueji.jpg" border="3" 
style="border-top-style:dotted;border-right-style:insert;border-bottom-styl 
e:dashed;border-left-style:groove"> 

</body> 

</html> 


在 正 11.0 中 浏览 效果 如 图 12-2 所 示 ， 可 以 看 到 网 页 显示 了 一 张 图 片 ， 图 片 的 上 边框 、 下 
边框 、 左 边框 和 右边 框 分 别 以 不 同样 式 显 示 。 
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奈 图 片 边 性 
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12.1.2 图片 缩放 
网 页 上 显示 一 张 图 片 时 ， 


图 12-2 4 种 样式 边框 显示 


默认 情况 下 都 是 以 图 片 的 原始 大 小 显示 的 。 如果 要 对 网 页 进行 排 


版 , 则 需要 对 图 片 的 大 小 进行 重新 设置 。 如果 对 图 片 设置 不 恰当 , 就 会 造成 图 片 的 变形 和 失真 ， 
所 以 一 定 要 保持 宽度 和 高 度 属性 的 比例 适中 。 对 于 图 片 大 小 设置 ， 可 以 采用 以 下 3 种 方式 。 


1. 描述 标记 属性 width 


和 height 


在 HTML 标记 语言 中 , 通过 <img> 标 记 的 描述 属性 height 和 width 可 以 设置 图 片 大 小 .width 
和 height 分 别 表示 图 片 的 宽度 和 高 度 ， 其 中 二 者 值 可 以 为 数值 或 百分比 ， 单 位 是 像素 。 需 要 注 
意 的 是 ， 高 度 属性 height 和 宽度 属性 width 设置 要 求 相 同 。 


【 例 12.3】 (实例 文件 : 
<!DOCTYPE html> 
<html> 

<head> 


ch12\12.3.html) 


<title> 图 片 边框 </title> 


</head> 
<body> 
<img src="feng.jpg" 
</body> 
</html> 


在 正 11.0 中 浏览 效果 如 
高 度 为 120 像素 。 


width=200 height=120> 


图 12-3 所 示 , 可 以 看 到 网 页 显示 了 一 张 图 片 , 其 宽度 为 200 像素 ， 
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站 ”D:\ 本 书 源 代码 \code 迹 图 ”搜索 
忆 图 片 边框 x 加 
育 名 百度 一 下 ,你 就 知道 


图 12-3 HTML 标记 设置 图 片 大 小 


2. 使 用 CSS3 中 max-width 和 max-height 

max-width 和 max-height 分 别 用 来 设置 图 片 宽度 最 大 值 和 高 度 最 大 值 .在 定义 图 片 大 小 时 ， 
如 果 图 片 默认 尺寸 超过 了 定义 的 大 小 ， 就 以 max-width 所 定义 的 宽度 值 显示 ， 而 图 片 高 度 将 同 
比例 变化 ， 定 义 max-height 也 是 一 样 的 道理 。 但 是 如 果 图 片 的 尺寸 小 于 最 大 宽度 或 高 度 ， 图 片 
就 按 原 尺寸 大 小 显示 。max-width 和 max-height 的 值 一 般 是 数值 类 型 ， 其 语法 格式 如 下 : 


img{ 
max-height:180px; 
} 


【 例 12.4】〔 实 例文 件 : ch12\12.4.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 图 片 边框 </title> 

<style> 

img{ 
max-height:180px; 

1 

</style> 

</head> 

<body> 

<img src="feng.jpg"> 

</body> 

</html> 


在 正 11.0 中 浏览 效果 如 图 12-4 所 示 ， 可 以 看 到 网 页 显示 了 一 张 图 片 ， 其 显示 高 度 是 180 
像素 ， 宽 度 将 作 同 比例 缩放 。 
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图 12-4 同比 例 缩放 图 片 


在 本 例 中 ， 也 可 以 只 设置 max-width 来 定义 图 片 最 大 宽度 ， 而 让 高 度 自动 缩放 。 
3. 使 用 CSS3 中 width 和 height 


在 CSS3 中 ， 可 以 使 用 属性 width 和 height 来 设置 图 片 宽度 和 高 度 ， 从 而 达到 对 图 片 的 缩 
放 效 果 。 


【 例 12.5】〔 实 例文 件 : ch12\12.5.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 图 片 边框 </title> 

</head> 

<body> 

<img src="feng.jpg"> 

<img src="feng.jpg" style="width:90px;height:100px"> 
</body> 

</html> 


在 正 11.0 中 浏览 效果 如 图 12-5 所 示 ， 可 以 看 到 网 页 显示 了 两 张 图 片 ， 第 一 张 图 片 以 原始 
大 小 显示 ， 第 二 张 图 片 以 指定 大 小 显示 。 


DA5RRvode\S ”号 || 挫 襟 - Pp- 
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图 12-5 CSS 指定 图 片 大 小 
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需要 注意 的 是 ， 当 仅仅 设置 了 图 片 的 width 属性 ， 而 没有 设置 height 属性 时 ， 图 片 
对 本 身 会 自动 等 纵横 比例 缩放 ， 如 果 只 设置 height 属性 也 是 一 样 的 道理 。 只 有 当 同 时 


设置 width 和 height 属性 时 才 会 不 等 比例 缩放 。 


12.2 对齐 图 片 


一 个 凌乱 的 图 文 网 页 是 每 一 个 浏览 者 都 不 喜欢 看 的 ， 而 一 个 图 文 并 茂 、 排 版 格式 整洁 简约 
的 页 面 更 容易 让 网 页 浏览 者 接受 ， 可 见 图 片 的 对 齐 方式 是 非常 重要 的 。 本 节 将 介绍 使 用 CSS3 
属性 定义 图 文 对 齐 方式 。 


12.2.1 ”横向 对 齐 方 式 


所 谓 图 片 横向 对 齐 ， 就 是 在 水 平方 向 上 进行 对 齐 ， 其 对 齐 样式 和 文字 对 齐 比较 相似 ， 都 有 
3 种 对 齐 方式 ， 分 别 为 左 对 齐 、 居 中 对 齐 和 右 对 齐 。 

如 果 要 定义 图 片 对 齐 方 式 ， 则 不 能 在 样式 表 中 直接 定义 图 片 样式 , 而 是 需要 在 图 片 的 上 一 
个 标记 级 别 〈 父 标记 ) 定义 对 齐 方式 ， 让 图 片 继承 父 标记 的 对 齐 方式 。 之 所 以 这 样 定义 父 标记 
对 齐 方式 ， 是 因为 img (图 片 ) 本 身 没有 对 齐 属性 ， 需 要 使 用 CSS 继承 父 标记 的 text-align 来 
定义 对 齐 方式 。 


【 例 12.6】〔 实 例文 件 : ch12\12.6.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 图 片 横向 对 齐 </title> 

</head> 

<body> 

<p style="text-align:left"><img src="mudan.jpg" style="max-width:140px;"> 
图 片 左 对 齐 </p> 

<p style="text-align:center"><img src="mudan.jpg" 
style="max-width:140px; "> 图 片 居中 对 齐 </p> 

<p style="text-align:right"><img src="mudan.jpg" 
style="max-width:140px; "> 图 片 右 对 齐 </p> 

</body> 

</html> 


在 正 11.0 中 浏览 效果 如 图 12-6 所 示 ， 可 以 看 到 网 页 显示 了 三 张 图 片 ， 大 小 相同 ， 但 对 齐 
方式 分 别 是 左 对 齐 、 居 中 对 齐 和 右 对 齐 。 
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Ea 片 左 对 齐 
图 片 居中 对 齐 
Es 片 右 对 齐 


图 12-6 图 片 横向 对 齐 


12.2.2 ”纵向 对 齐 方式 
纵向 对 齐 就 是 垂直 对 齐 ， 即 在 垂直 方向 上 和 文字 进行 搭配 使 用 。 通 过 对 图 片 垂直 方向 上 的 


设置 ， 可 以 设置 图 片 和 文字 的 高 度 一 致 。 在 CSS3 中 ， 对 于 图 片 纵向 设置 ， 通 常 使 vertical-align 
属性 来 定义 。 


vertical-align 属性 设置 元 素 的 垂直 对 齐 方式 ， 即 定义 行内 元 素 的 基线 相对 于 该 元 素 所 在 行 
的 基线 的 垂直 对 齐 。 人 允许 指 定 负 的 长 度 值 和 百分比 值 ， 这 会 使 元 素 降低 。 在 表单 元 格 中 ， 这 个 
属性 会 设置 单元 格 框 中 内 容 的 对 齐 方式 ， 其 语法 格式 如 下 


vertical-align:baselinelsublsuperltop1ltext-toplmiddlelbottom|ltext-botto 
mllength 


上 面 参数 含义 如 表 12-1 所 示 。 
表 12-1 纵向 对 齐 参数 含义 


说 明 


baseline 支持 valign 特性 的 对 象 内 容 与 基线 对 齐 

Sub 垂直 对 齐 文本 的 下 标 

super 垂直 对 齐 文 本 的 上 标 

top 将 支持 valign 特性 的 对 象 的 内 容 与 对 象 项 端 对 齐 
text-top 将 支持 valign 特性 的 对 象 的 文本 与 对 象 项 端 对 齐 
middle 将 支持 valign 特性 的 对 象 的 内 容 与 对 象 中 部 对 齐 
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( 续 表 ) 
参数 名 称 说 明 
bottom 将 支持 valign 特性 的 对 象 的 文本 与 对 象 底 端 对 齐 
text-bottom | 将 支持 valign 特性 的 对 象 的 文本 与 对 象 底 端 对 齐 
length 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 或 百分数 ， 可 为 负数 ， 定 义 由 基线 算 起 的 偏 
移 量 。 基 线 对 于 数值 来 说 为 0， 对 于 百分数 来 说 就 是 0 


【 例 12.7】〔 实 例文 件 ，ch12\12.7.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 图 片 纵 向 对 齐 </title> 

<style> 

img{ 

max-width:100px; 

| 

</style> 

</head> 

<body> 

<p> 纵 向 对 齐 方 式 :baseline<img src=mudan.jpg 
style="vertical-align:baseline"></p> 

<p> 纵 向 对 齐 方 式 :bottom<img src=mudan.jpg 
style="vertical-align:bottom"></p> 

<p> 纵 向 对 齐 方 式 :middle<img src=mudan.jpg 
style="vertical-align:middle"></p> 

<p> 纵 向 对 齐 方 式 : sub<img src=mudan.jpg style="vertical-align:sub"></p> 

<p> 纵 向 对 齐 方 式 : super<img src=mudan.jpg style="vertical-align:super"></p> 

<p> 纵 向 对 齐 方式 :数值 定义 <img src=mudan.jpg style="vertical-align:20px"></p> 

</body> 

</html> 


在 正 11.0 中 浏览 效果 如 图 12-7 所 示 ， 可 以 看 到 网 页 显示 6 张 图 片 ， 垂 直方 向 上 分 别 是 
baseline、bottom、middle、sub 、super 和 数值 对 齐 。 


仔细 观察 图 片 和 文字 的 不 同 对 齐 方式 ， 即 可 深刻 理解 各 种 纵向 对 齐 的 不 同 之 处 。 
ER 
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| 所 图片 和 对 刘 x 加 
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| 纵向 对 齐 方式 :baselin Es 
纵向 对 齐 方式 : -上 


纵 疝 对 齐 方式 :si 四 


| 纵向 对 齐 方式 :supe 


| 纵向 对 齐 方式 :数值 定义 


图 12-7 图 片 纵 向 对 齐 


12.3 图 文 混 排 


排版 一 个 网 页 ， 比 较 常见 的 方式 就 是 图 文 混 排 。 文 字 说 明 主 题 ， 图 像 显 示 新 闻 情境 ， 二 者 
结合 起 来 相得益彰 。 本 节 将 介绍 图 片 和 文字 的 排版 方式 。 


12.3.1 文字 环绕 


在 网 页 中 进行 排版 时 ， 可 以 将 文字 设置 成 环绕 图 片 的 形式 ， 即 文字 环绕 。 文 字 环绕 应 用 非 
常 广泛 ， 如 果 再 配合 背景 ， 就 可 以 达到 绚丽 的 效果 。 

在 CSS3 中 ， 可 以 使 用 float 属性 来 定义 该 效果 。float 属性 主要 定义 元 素 在 哪个 方向 浮动 。 
一 般 情 况 下 这 个 属性 应 用 于 图 像 元 素 ， 使 文本 围绕 在 图 像 周 围 ， 有 时 它 也 可 以 定义 其 他 元 素 浮 
动 。 浮 动 元 素 会 生成 一 个 块 级 框 ， 而 不 论 它 本 身 是 何 种 元 素 。 如 果 浮 动 非 蔡 换 元 素 ， 则 要 指定 
一 个 明确 的 宽度 ， 和 否则 它们 会 尽 可 能 地 罕 。 

float 语法 格式 如 下 : 


float:nonelleft|right 


其 中 none 表示 默认 值 对 象 不 漂浮 ; left 表示 文本 流向 对 象 的 右边 ; right 表示 文本 流 
ET 向 对 条 的 左边 . 
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【 例 12.8】 实 例文 件 : ch12\12.8.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 文 字 环 绕 </title> 

<style> 

img{ 

max-width:120px; 

float:left; 

} 

</style> 

</head> 

<body> 

<p> 

一 个 可 爱 的 小 家 伙 乘 着 风 儿 顽皮 地 落 在 了 我 的 肩 上 ， 我 低头 看 了 看 ， 原 来 是 一 片 枫叶 。 

<img src="fengye.jpg"> 

我 小 心 翼 翼 地 把 它 捧 在 手中 ， 一 阵风 儿 吹 过 ， 叶 子 的 几 个 小 尖 角 随 风 摆 起 ， 多 像 婴 儿 的 小 手掌 啊 ! 
平滑 的 叶 面 ， 清 晰 的 脉络 ， 十 分 柔软 细嫩 。 枫 叶 树种 在 秋冬 的 时 候 ， 体 内 会 产生 一 些 化 学 反应 ， 让 原本 
树叶 中 所 含 枫叶 (10 片 ) 的 物质 或 部 分 组 织 分 解 之 后 ， 回 收 储藏 在 茎 或 根 的 部 位 ， 来 年 春天 的 时 候 可 以 再 
利用 。 叶 绿 体 、 叶 绿 素 就 是 被 分 解 回收 的 对 象 之 一 ， 因 为 叶绿素 的 含量 较 大 而 遮盖 了 其 他 颜色 ， 使 叶片 
呈 绿 色 ， 因 此 当 叶 子 里 的 叶绿素 没有 的 时 候 ， 其 他 色素 的 颜色 就 彰显 出 来 ， 如 花 青 素 的 红色 、 胡 葛 卜 素 
的 黄色 和 叶 黄 素 的 黄色 等 。 除 此 之 外 ， 枫 叶 中 贮存 的 糖分 还 会 分 解 转变 成 花 青 素 ， 使 叶片 的 颜色 更 加 艳 
丽 、 火 红 。 枫叶 没有 五 个 “手指 ”就 不 是 枫叶 ， 而 且 枫叶 的 “五 指 ” 上 具有 锯齿 ， 这 是 枫叶 的 特色 ! 

</p> 

</body> 

</html> 


在 正 11.0 中 浏览 效果 如 图 12-8 所 示 ， 可 以 看 到 图 片 被 文字 所 环绕 ， 并 在 文字 的 左 方向 显 
示 。 如 果 将 float 属性 的 值 设置 为 right， 则 其 图 片 会 在 文字 右 方 显示 并 环绕 。 


CR rT | 万- 
| 下 wa 本 


图 12-8 文字 环绕 效果 


12.3.2 ”设置 图 片 与 文字 间距 


如 果 需 要 设置 图 片 和 文字 之 间 的 距离 〈 即 文字 之 间 存 在 一 定 间距 ， 而 不 是 紧 紧 环 绕 ) ， 就 
可 以 使 用 CSS3 中 的 属性 padding 来 设置 。 
padding 属性 主要 用 来 在 一 个 声明 中 设置 所 有 内 边 距 属性 ， 即 可 以 设置 元 素 所 有 内 边 距 的 
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宽度 ， 或 者 设置 各 边 上 内 边 距 的 宽度 。 如 果 一 个 元 素 既 有 内 边 距 又 有 背景 ， 则 从 视觉 上 看 可 能 
会 延伸 到 其 他 行 ， 有 可 能 还 会 与 其 他 内 容重 彼 。 设 置 时 不 允许 指定 负 边 距 值 。 
其 语法 格式 如 下 : 


padding:padding-toplpadding-right|lpadding-bottom|lpadding-left 


其 参数 padding-top 用 来 设置 距离 顶部 内 边 距 ，padding-right 用 来 设置 距离 右 部 内 边 
距 ; padding-bottom 用 来 设置 距离 底部 内 边 距 ，padding-left 用 来 设置 距离 左 部 内 边 距 。 


【 例 12.9】〔 实 例文 件 : ch12\12.9.html) 

<!DOCTYPE html> 

<html> 

<head> 

<title> 文 字 环 绕 </title> 

<style> 

img{ 

max-width:120px; /* 设 置 图 像 的 最 大 宽度 */ 

float:left; /* 设 置 图 像 靠 左 显示 */ 

padding-top:10px; /* 设 置 图 像 的 上 内 边 距 */ 

padding-right:50px; /* 设 置 图 像 的 右 内 边 距 */ 

padding-bottom:10px; /* 设 置 图 像 的 下 内 边 距 */ 

} 

</style> 

</head> 

<body> 

<p> 一 个 可 爱 的 小 家 伙 乘 着 风 儿 顽皮 地 落 在 了 我 的 肩 上 ， 我 低头 看 了 看 ， 原 来 是 一 片 枫叶 。 

<img src="fengye.jpg"> 

我 小 心 翼 翼 地 把 它 捧 在 手中 ， 一 阵风 儿 吹 过 ， 叶 子 的 几 个 小 尖 角 随 风 摆 起 ， 多 像 婴 儿 的 小 手掌 啊 ! 
平滑 的 叶 面 ， 清 晰 的 脉络 ， 十 分 柔软 细嫩 。 枫 叶 树种 在 秋冬 的 时 候 ， 体 内 会 产生 一 些 化 学 反应 ， 让 原本 
树叶 中 所 含 枫叶 (10 片 ) 的 物质 或 部 分 组 织 分 解 之 后 ， 回 收 储藏 在 茎 或 根 的 部 位 ， 来 年 春天 的 时 候 可 以 再 
利用 。 叶 绿 体 、 叶 绿 素 就 是 被 分 解 回 收 的 对 象 之 一 ， 因 为 叶绿素 的 含量 较 大 而 遮盖 了 其 他 颜色 ， 使 叶片 
旺 绿色 ， 因 此 当 叶 子 里 的 叶绿素 没有 的 时 候 ， 其 他 色素 的 颜色 就 彰显 出 来 ， 如 花 青 素 的 红色 、 胡 萝卜 素 
的 黄色 和 叶 黄 素 的 黄色 等 。 除 此 之 外 ， 枫 叶 中 贮存 的 糖分 还 会 分 解 转 变 成 花 青 素 ， 使 叶片 的 颜色 更 加 赵 
丽 、 火红。 枫叶 没有 五 个 “手指 ”就 不 是 枫叶 ,而 且 枫叶 的 “五 指 ” 上 具有 锯齿 ,这 是 枫叶 的 特色 !</p> 

</body> 

</html> 


在 正 11.0 中 浏览 效果 如 图 12-9 所 示 ， 可 以 看 到 图 片 被 文字 所 环绕 ， 并 且 文 字 与 图 片 右边 
间距 为 50 像素 ， 上 下 各 为 10 像素 。 
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一 个 可 爱 的 小 : a Se 低头 看 了 和 看， 原来 是 一 片 机 
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这 是 枫叶 的 特色 ! 


图 12-9 设置 图 片 和 文字 边 距 


12.4 综合 实例 1 一 一 一 句 话 新 闻 


在 各 大 网 站 中 ， 点 击 率 最 高 的 通常 是 新 闻 ， 因 为 人 们 每 天 都 在 不 停 地 浏览 新 闻 。 新 闻 格 式 
要 求 简洁 明了 、 文 字 表达 清楚 ， 配 上 图 片 更 是 图 文 并 茂 。 对 于 网 页 新 闻 排 版 ， 应 根据 其 新 闻 内 
容 ， 可 以 有 一 句 话 新 闻 。 本 实例 将 介绍 如 何 配合 图 片 ， 设 计 出 一 句 话 新 闻 的 网 页 版 面 ， 具 体 步 
又 如 下 : 

L@ 国 分 析 需 求 。 

在 本 实例 中 ， 如 果 要 显示 一 句 话 新 闻 ， 则 需要 包含 两 个 部 分 : 一 个 是 新 闻 标题 ， 另 一 
新 闻 内 容 ， 新 闻 内 容 可 以 是 图 片 和 段落 文字 。 此 处 可 以 使 用 div 将 两 个 部 分 分 成 不 同 的 层次 。 


[到 构建 HTML 页 面 。 


页 面 中 包含 的 这 两 部 分 可 以 使 用 3 个 <div> 标 记 来 进行 层次 划分 ,一 个 div 包含 整个 一 句 话 
新 闻 ; 一 个 div 包含 标题 (标题 可 以 分 为 正 标题 和 副标题 》; 一 个 div 包含 图 片 和 段落 。 其 代 
码 如 下 : 


<!DOCTYPE html> 
<html> 

<head> 
<title> 时 事 新 闻 </title> 
<style> 

</style> 

</head> 

<body> 

<div> 

<div> 


<p> 英 国 皇家 国际 航 展开 幕 </p> 
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<p>2011-07-17 09:38 来 源 : 新 华 网 </p> 

</div> 

<div> 

<p align=center> 

<img src=feiji.jpg border=1> 

<p> 

<p> 

7 月 16 日 ， 在 英国 的 费 尔 福 德 ， 一 架 A-10 攻 击 机 进行 飞行 表演 。 为 期 2 天 的 英国 皇家 国际 航 展 当日 
在 费 尔 福 德 空军 基地 开幕 ， 这 是 世界 上 规模 最 大 的 军用 飞机 航空 展 之 一 。 

</p> 

</div> 

</div> 

</body> 

</html> 


在 正 11.0 中 浏览 效果 如 图 12-10 所 示 ， 可 以 看 到 在 网 页 中 显示 了 段落 、 图 片 和 标题 。 


[0 添加 CSS 代码， 修饰 整体 div。 


<style> 
.da{border:#0033FF lpx solid;} 
</style> 


1 罗 在 HTML 代码 中 ， 使 用 类 标识 符 指向 da。 


<div class=da> 

<div > 

<p > 英国 皇家 国际 航 展开 幕 </P> 

<p >2011-07-17 09:38 来 源 : 新 华 网 </p> 

</div> 

<div> 

<p align=center> 

<img src=feiji.jpg border=1> 

<p> 

7 月 16 日 ， 在 英国 的 费 尔 福 德 ， 一 架 A-10 攻 击 机 进行 飞行 表演 。 为 期 2 天 的 英国 皇家 国际 航 展 当 日 
在 费 尔 福 德 空军 基地 开幕 ， 这 是 世界 上 规模 最 大 的 军用 飞机 航空 展 之 一 。 

</p> 

</div> 

</div> 


加 在 正 11.0 中 浏览 效果 如 图 12-11 所 示 ， 可 以 看 到 在 网 页 中 显示 了 一 个 边框 ， 并 且 段 
落 、 图 片 包含 在 边框 里 面 。 
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英国 皇家 国际 航 展开 项 
2011-07-17 09:38 来 源 : 新华 网 


?月 16 日 ， 在 英国 的 费 尔 福 德 ， 一 对 A-10 攻 击 机 进行 飞行 表演 。 为 期 2 天 的 英 | 
际 肪 展 当日 在 费 尔 福 德 空军 基 地 开 攻 ， 这 是 世界 上 规 梗 最 大 的 军用 飞机 骸 空 | 


[ 活 国 皇家 国际 航 展开 莫 
11-07-17 09:38 来 源 : 新 华 网 


[月 16 日 ， 在 英国 的 费 尔 福 德 ， 一 架 4-10 攻 击 机 进行 飞行 表演 ， 为 期 2 天 的 英国 皇家 上 
际 骸 展 当日 在 费 尔 福 德 空 下 基地 开 帝 ， 这 是 世界 上 规模 最 大 的 军用 飞机 航空 展 之 一 < 


图 12-10 基本 层次 划分 


t@g 添加 CSS 代码 ， 修 饰 正 标 题 和 副标题 。 


.title{color:blue;font-size:25px; text-align:center} 


-xtitle{ /* 设 置 副 标题 样式 */ 
text-align:center; 
font-size:13px; 
color:gray; 


} 


图 12-11 CSS 整体 修饰 


/* 设 置 正 标题 样式 */ 


L 国 在 HTML 代码 中 ， 引 用 上 面 两 个 类 标识 符 ， 代 码 如 下 : 


<div class=da> 
<div> 


<p class=title> 英 国 皇 家 国际 航 展开 幕 </p> 
<p class=xtitle>2011-07-17 09:38 来 源 : 新 华 网 </p> 


</div> 

<div> 

<p align=center> 

<img src=feiji.jpg border=1> 
<p> 

<p> 


7 月 16 日 ， 在 英国 的 费 尔 福 德 ， 一 架 A-10 攻 击 机 进行 飞行 表演 。 为 期 2 天 的 英国 皇家 国际 航 展 当日 
在 费 尔 福 德 空军 基地 开幕 ， 这 是 世界 上 规模 最 大 的 军用 飞机 航空 展 之 一 。 


</p> 
</div> 
</div> 


[图 在 正 11.0 中 浏览 效果 如 图 12-12 所 示 ， 可 以 看 到 在 网 页 中 正 标题 和 副标题 都 居中 显 


示 ， 并 且 正 标题 以 蓝 色 显示 ， 大 小 为 25 像素 ; 


img{ 


border-top-style:solid; /* 设 


border-right-style:dashed; /* 设 置 


副标题 以 灰色 显示 ， 大 小 为 13 像素 。 
人 gj 添加 CSS 代码 ， 修 饰 图 片 ， 代 码 如 下 : 


图 像 的 上 边框 样式 为 实 线 */ 


四 像 的 右边 框 样式 为 虚线 */ 
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border-bottom-style:solid; /* 设 置 图 像 的 下 边框 样式 为 实 线 */ 
border-left-style:dashed; /* 设 置 图 像 的 左边 框 样式 为 虚线 */ 


蜡 加 此 处 使 用 了 标记 标识 符 ， 会 直接 作用 于 网 页 中 的 图 片 ， 此 处 就 不 再 显示 HTML 代码 
了 。 在 IE11.0 中 浏览 效果 如 图 12-13 所 示 , 可 以 看 到 在 网 页 中 图 片 边框 显示 了 不 同样 式 ， 上 下 
以 直线 显示 ， 左 右 以 破 折 线 显示 。 


= D x Ey 口 其 
可 DasF 书 趾 K 本 Wode 呈 KK 国 ”中 投 贡 - 只 -| 从 交加 国 | | 可 DAs 忆 大 Kcodev 汪 (图 -中 | 入 和 DP- 1 be 7 
[ * 辐 |8 Pma 廿 
病 9E 一 下 , {rotnn 请 SE 下, Se 
英国 皇家 国际 航 展开 幕 英国 皇家 国际 航 展开 幕 
2011-07-17 09:36 来 本 新华 网 2012-07-17 09:36 来 源 新 人 网 

| 月 16 日 ， 在 英国 的 费 尔 9 可 过 后 区 滴 : 入 寻 ?的 关 国 拉 家 国 际 | | 局 2 是， 在 芝 国 的 开本 让 册 机 寺 生生 大 扩 2 鸭 册 2 大 的 半 田 鱼 家 国际 
ised hd 和 人 丰 尖 和 司 展 当日 在 费 尔 福 德 空 定 基 地 开 闹 这 是 世界 上 规模 最 大 的 守 用 飞机 航空 展 之 

图 12-12 ”修饰 标题 图 12-13 图 片 边框 样式 修饰 


亨 草 添加 CSS 代码 ， 修 饰 段落 ， 代 码 如 下 : 


<p style="text-indent:10mm; font-size:15px;"> 7 月 16 日 ， 在 英国 的 费 尔 福 德 ， 一 架 
R-10 攻 击 机 进行 飞行 表演 。 为 期 2 天 的 英国 皇家 国际 航 展 当日 在 费 尔 福 德 空军 基地 开幕 ， 这 是 世界 上 规 
模 最 大 的 军用 飞机 航空 展 之 一 。 


</p> 


而 在 下 11.0 中 浏览 效果 如 图 12-14 所 示 , 可 以 看 到 在 网 页 中 段落 缩 进 10mm, 并 且 字体 
大 小 为 15 像素 。 


x 
[opremneni Bt - 6- 及 -| 从 © 


英国 皇家 国际 航 展开 幕 


2011-07-11 的 :38 夫 天 ,新华 网 


16 日 。 在 英国 的 午 尔 福 德 。 一 办 4-10 攻 击 机 进行 飞行 表 泣 。 为 期 2 的 区 国生 家 国际 
| 福 待 空 军 基地 开幕 。 这 是 世界 上 规 樟 最 大 的 军用 飞机 舱室 | 


图 12-14 ”修饰 段落 
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12.5 ”综合 实例 2 一 一 学 校 宣传 单 


每 年 暑假 时 ， 学 校 招 生 就 铺天盖地 ， 大 量 的 宣传 单 页 到 处 都 是 。 本 实例 模仿 一 个 学 校 宣 传 
单 ， 进 行 图 文 混 排 ， 从 而 加 深 前 面 学 习 的 知识 ， 具 体 步骤 如 下 : 


内 


L@ 国 分 析 需 求 。 


本 实例 包含 两 个 部 分 : 一 个 部 分 是 图 片 信息 , 用 来 介绍 学 校场 景 ; 另 一 个 部 分 是 段落 信息 ， 
用 来 介绍 学 校 历史 和 理念 。 这 两 部 分 都 放 在 一 个 div 中 。 


[6 构建 HTML 网 页 。 


创建 HTML 页面， 页 面 中 包含 一 个 div，div 中 又 包含 图 片 和 两 个 段落 信息 。 其 代码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<title> 学 校 宣传 单 </title> 

</head> 

<body> 

<div> 

<img src="xuexiao.jpg"/><p> 某 大 学 风景 优美 </p><p> 学 校 发 扬 “ 百 折 不 挠 、 艰 苦 创业 ” 
的 办 学 传统 ， 坚 持 “ 质 量 立 校 、 人 才 兴 校 、 创 新 强 校 、 文 化 铸 校 、 和 谐 荣 校 ” 的 办 学 理念 ， 弘 扬 “ 爱 国 
荣 校 、 民 主 和 谐 、 求 真 务实 、 开 放 创 新 ”的 精神 </p> 

</div> 

</body> 

</html> 


在 下 11.0 中 浏览 效果 如 图 12-15 所 示 ， 可 以 看 到 在 网 页 中 标题 和 内 容 被 一 条 虚线 隔 开 。 
La 国 添加 CSS 代码， 修饰 div。 


<style> 
big{ 
width:430px; 
} 

</style> 


在 HTML 代码 中 ， 将 big 引用 到 div 中 ， 代 码 如 下 : 


<div class=big> 
<img src="xuexiao.jpg"/><p> 某 大 学 风景 优美 </p><p> 学 校 发 扬 “ 百 折 不 挠 、 艰 苦 创 
业 ” 的 办 学 传统 ， 坚 持 “ 质 量 立 校 、 人 才 兴 校 、 创 新 强 校 、 文 化 铸 校 、 和 谐 荣 校 ”的 办 学 理念 ， 弘 扬 “ 爱 
国 荣 校 、 民 主 和 谐 、 求 真 务实 、 开 放 创 新 ”的 精神 </p> 


</div> 


在 正 11.0 中 浏览 效果 如 图 12-16 所 示 ， 可 以 看 到 在 网 页 中 段落 以 块 的 形式 显示 。 
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Sa, REN A 


图 12-16 修饰 div 层 


图 12-15 HTML 页 面 显示 


轩 出 添加 CSS 代码 ， 修 饰 图 片 。 


img{ 
width:260px; /* 设 置 图 像 的 宽度 */ 
height :220px; /* 设 置 图 像 的 高 度 */ 
border:#009900 2px solid; /* 设 置 图 像 的 边框 颜色 、 粗 细 和 实 线 */ 
floaE = Totty, /* 设 置 图 像 向 左 浮动 */ 
padding-right:0.5px; /* 设 置 右 内 边 距 的 大 小 */ 


i 
在 正 11.0 中 浏览 效果 如 图 12-17 所 示 ， 可 以 看 到 在 网 页 中 图 片 以 指定 大 小 显示 ， 并 且 带 
有 边框 ， 图 片 在 左 侧 被 文字 环绕 。 


[0 国 添加 CSS 代码 ， 修 饰 段落 。 


Pi 
font-family:" 宋 体 "7 人 
font-size:14px; 段落 文字 的 大 小 */ 
line-height:20px; 人 


; 
在 正 11.0 中 浏览 效果 如 图 12-18 所 示 ， 可 以 看 到 在 网 页 中 段落 以 宋体 显示 ， 大 小 为 14 像 


素 ， 行 高 为 20 像素 。 
| 人 人 一 国生 二 日“XX 
外 DD:\ 相 书 耻 代码 \codeW 图 ” 咱 | 搜 二 - 只 司 “D:\ 本 书 疗 f\code 浊 国 ” 必 | | 搜索 
感 学 校 言传 组 Is 学 校 言 传单 U 


文件 仿 旨 则 二 MV) 收 训 A) 工具 TH 
请 党 百 诬 一 下 ， 你 就 知道 


文件 ()” 乱 踢 (日 、 王 看 (V) 收藏 夫 (A) 工兵 (TD 帮助 (H) 
请 各 百 度 下 , 你 M0 首 


图 12-17 修饰 图 片 


图 12-18 ”修饰 段落 
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12.6 专家 解 惑 


1. 网 页 进行 图 文 排 版 时 ， 哪 些 是 必须 要 做 的 ? 
在 进行 图 文 排 版 时 ， 通 常 有 如 下 5 个 方面 需要 网 页 设计 者 考虑 。 


(1) 首 行 缩 进 : 段落 的 开头 应 该 空 两 格 。 HTML 中 空格 键 起 不 了 作用 , 当然 可 以 用 “nbsp;” 
来 代替 一 个 空格 ， 但 这 不 是 理想 的 方式 。 应 该 用 CSS3 中 的 首 行 缩 进 ， 且 大 小 为 2cm。 
(2) 图 文 混 排 在 CSS3 中 ， 可 以 用 float 来 让 文字 在 没有 清理 浮动 的 时 候 显示 在 图 片 以 
外 的 空白 处 。 
(3) 设置 背景 色 : 设置 网 页 背景 以 增加 效果 。 
(4) 文字 居中 : 可 以 CSS 的 text-align 设置 文字 居中 。 
(5) 显示 边框 : 通过 border 为 图 片 添加 一 个 边框 。 
2. 设置 文字 环绕 时 ，float 元 素 为 什么 会 失去 作用 ? 
很 多 浏览 器 在 显示 未 指定 width 的 float 元 素 时 会 发 生 错误 。 所 以 不 管 float 元 素 的 内 容 如 
何 ， 一 定 要 为 其 指定 width 属性 。 
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任何 一 个 页 面 ,首先 映 入 眼帘 的 就 是 网 页 的 背景 色 和 基调 ,不 同类 型 的 网 站 有 不 同 的 背景 
和 基调 ， 因 此 页 面 中 的 背景 通常 是 网 站 设计 时 一 个 重要 的 步骤 。 对 于 单个 HTML 元 素来 说 ， 
可 以 通过 CSS3 属性 设置 元 素 边框 样式 ， 包 括 宽度 、 显 示 风 格 和 颜色 等 。 本 章 将 重点 介绍 网 页 
背景 设置 和 HTML 元 素 边框 样式 。 


13.1 背景 相关 属性 


背景 是 网 页 设计 中 的 重要 因素 之 一 ， 一 个 背景 优美 的 网 页 总 能 吸引 不 少 访问 者 。 例 如 ， 喜 
庆 类 网 站 都 是 以 火红 背景 为 主题 ，CSS 的 强大 表现 功能 在 背景 方面 同样 发 挥 得 淋 沉 尽 致 。 


13.1.1 背景 颜色 


background-color 属性 用 于 设置 网 页 背景 色 ， 同 设置 前 景色 的 color 属性 一 样 ， 
background-color 属性 接受 任何 有 效 的 颜色 值 ， 而 对 于 没有 设置 背景 色 的 标记 ， 默 认 背 景色 为 
透明 (tranaparent) 。 
其 语法 格式 如 下 : 


{background-color:transparent|color} 


关键 字 transparent 是 个 默认 值 ， 表 示 透 明 。 背 景 颜 色 color 的 设置 方法 可 以 采用 英文 单词 、 
十 六 进 制 、RGB、HSL、HSLA 和 GRBA。 


【 例 13.1】〔 实 例文 件 : ch13\13.1.html) 


<!DOCTYPE html> 

<html> 

<head><title> 背 景色 设置 </title></head> 

<body style="background-color:PaleGreen;color:Blue"> 
<p>background-color 属 性 设置 背景 色 ，color 属 性 设置 字体 颜色 ， 即 前 景色 。</p> 
</body> 

</html> 
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在 正 11.0 中 浏览 效果 如 图 13-1 所 示 ， 可 以 看 到 网 页 背景 色 显 示 浅 绿色 ， 而 字体 颜色 为 蓝 
色 。 注 意 ， 在 网 页 设计 时 其 背景 色 不 要 使 用 太 艳 的 颜色 ， 否 则 会 给 人 一 种 喧 宾 夺 主 的 感觉 。 


闻 ”DA 本 书 源 代码 \codeW 图 ”C0 | 搜索 .… -| 从 


图 13-1 设置 背景 色 


background-color 不 仅 可 以 设置 整个 网 页 的 背景 颜色 ， 而 且 还 可 以 设置 指定 HTML 元 素 的 
背景 色 ， 如 设置 hl 标题 的 背景 色 、 段 落 p 的 背景 色 等 。 


【 例 13.2】 (实例 文件 : ch13\13.2.html) 


<!DOCTYPE html> 
<html> 
<head> 
<title> 背 景色 设置 </title> 
<style> 
| 
background-color:red; /* 设 置 标题 的 背景 颜色 为 红色 */ 
color:black; /* 设 置 标题 的 颜色 为 黑色 */ 
text-align:center; /* 设 置 标 题 的 居中 显示 */ 
) 
pt{ 
background-color:gray; /* 设 置 正文 的 背景 颜色 为 灰色 */ 
color:blue; /* 设 置 正文 的 颜色 为 蓝 色 */ 
text-indent:2em; /* 设 置 文本 缩 进 */ 
EF 
</style> 
</head> 
<body> 
<h1> 颜 色 设置 </h1> 
<p>background-color 属 性 设置 背景 色 ，color 属 性 设置 字体 颜色 ， 即 前 景色 。</p> 
</body> 
</html> 


在 正 11.0 中 浏览 效果 如 图 13-2 所 示 ， 可 以 看 到 网 页 中 标题 区 域 背景 色 为 红色 ， 段 落 区 域 
背景 色 为 灰色 ， 并 且 分 别 为 字体 设置 了 不 同 的 前 景色 。 


< 
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图 13-2 设置 HTML 元 素 背景 色 


13.1.2 ”背景 图 片 


网 页 中 不 但 可 以 使 用 背景 色 来 填充 网 页 背景 ， 同 样 也 可 以 使 用 


CSS3 属性 可 以 对 背景 图 片 进行 精确 定位 。background-image 
常 在 标记 <body> 中 应 用 ， 将 图 片 用 于 整个 主体 中 。 
background-image 语法 格式 如 下 : 


background-image:nonelurl (url) 


背景 图 片 来 填充 网 页 。 通过 


属性 用 于 设置 标记 的 背景 图 片 , 通 


其 默认 属性 为 无 背景 图 , 当 需 要 使 用 背景 图 时 可 以 用 url 进行 导入 。url 可 以 使 用 绝对 路 径 ， 


也 可 以 使 用 相对 路 径 。 


【 例 13.3】〔 实 例文 件 : ch13\13.3.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 背 景色 设置 </title> 

<style> 

body{ 
background-image:url (xiyang .jpg) 

} 

</style> 

</head> 

<body> 

<p style="font-size:20pt"> 夕 阳 无 限 好 </p> 

</body> 

</html> 


在 下 11.0 中 浏览 效果 如 图 13-3 所 示 ， 可 以 看 到 网 页 中 显示 背景 图 ， 但 如 果 图 片 大 小 小 于 


整个 网 页 大 小 ， 图 片 就 会 重复 平 铺 整 个 网 页 。 
在 设置 背景 图 片 时 ， 最 好 同时 设置 背景 色 ， 这 样 当 背 景 


图 片 因 某 种 原因 


无 法 正常 显示 时 ， 
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可 以 使 用 背景 色 来 代替 。 当 然 ， 如 果 正 常 显示 ， 背 景 图 片 将 覆盖 背景 色 。 


图 13-3 设置 背景 图 片 


13.1.3 ”背景 图 片 重复 


在 进行 网 页 设计 时 ， 通 常 都 是 一 个 网 页 使 用 一 张 背景 图 片 ， 如 果 图 片 大 小 小 于 背景 图 片 ， 
则 会 直接 重复 平 铺 整个 网 页 ， 但 这 种 方式 不 适用 于 大 多 数 页 面 。 在 CSS 中 可 以 通过 
background-repeat 属性 设置 图 片 的 重复 方式 ， 包 括 水 平 重复 、 垂 直 重 复 和 不 重复 等 。 

background-repeat 属性 用 于 设置 背景 图 片 是 否 重复 平 铺 ， 各 属性 值 说 明 如 表 13-1 所 示 。 


表 13-1 background-repeat 属性 


background-repeat 属性 重复 背景 图 片 是 从 元 素 的 左上 角 开 始 平 铺 ， 直 到 水 平 、 垂 直 或 全 部 
页 面 都 被 背景 图 片 覆盖 。 


【 例 13.4】 (实例 文件 : ch13\13.4.html) 
<!DOCTYPE html> 

<html> 

<head> 


<title> 背 景 图 片 重复 </title> 


O00 
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<style> 

bodyt{ 
background-image:url (xiyang.jpg); /* 设 置 背 景 图 片 */ 
background-repeat:no-repeat; /* 设 置 背 景 图 片 不 重复 平 铺 */ 

</style> 

</head> 

<body> 

<p style="font-size:20pt"> 夕 阳 无 限 好 </p> 

</body> 

</html> 


在 正 11.0 中 浏览 效果 如 图 13-4 所 示 ， 可 以 看 到 网 页 中 显示 背景 图 ， 但 图 片 以 默认 大 小 显 
示 ， 而 没有 对 整个 网 页 背景 进行 填充 ， 这 是 因为 代码 中 设置 了 背景 图 不 重复 平 铺 。 

同样 可 以 在 上 面 代码 中 设置 background-repeat 的 属性 值 为 其 他 值 ， 如 可 以 设置 值 为 
repeat-x， 表 示 图 片 在 水 平方 向 平 铺 。 此 时 ， 在 正 11.0 中 浏览 效果 如 图 13-5 所 示 。 


图 13-4 背景 图 不 重复 图 13-5 水 平方 向 平 铺 


13.1.4 ”背景 图 片 显 示 


对 于 一 个 文本 较 多 ， 一 屏 显 示 不 了 的 页 面 ， 如 果 使 用 的 背景 图 片 不 足以 覆盖 整个 页 面 ， 而 
且 只 将 背景 图 片 应 用 在 页 面 的 一 个 位 置 ， 那 么 在 浏览 页 面 时 会 出 现 看 不 到 背景 图 片 ， 或 者 背景 
图 片 初始 可 见 ， 但 随 着 页 面 的 滚动 又 不 可 见 的 情况 。 也 就 是 说 ， 背 景 图 片 不 能 时 刻 随 着 页 面 的 
滚动 显示 。 

要 解决 上 述 问 题 , 用 要 使 用 background-attachment 属性 ， 该 属性 用 来 设置 背景 图 片 是 否 随 
文档 一 起 滚动 。 该 属性 包含 两 个 属性 值 : scroll 和 fixed， 并 适用 于 所 有 元 素 ， 如 表 13-2 所 示 。 
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表 13-2 background-attachment 属性 值 


属性 值 描述 
默认 值 ， 当 页 面 滚动 时 ， 背 景 图 片 随 页 面 一 起 滚动 


背景 图 片 固定 在 页 面 的 可 见 区 域 里 


使 用 background-attachment 属性 可 以 使 背景 图 片 始终 处 于 视野 范围 内 ， 以 避免 出 现 因 页 面 
滚动 而 消失 的 情况 。 


【 例 13.53】“〈 实 例文 件 : ch13\13.5html) 


<!DOCTYPE html> 
<html> 
<head> 
<title> 背 景 显示 方式 </title> 
<style> 
body{ 
background-image:url (xiyang.jpg); /* 设 置 背 景 图 片 */ 
background-repeat :no-repeat; /* 设 置 背 景 图 片 不 重复 平 铺 */ 
background-attachment :fixed; /* 设 置 背 景 图 片 固定 在 可 见 区 域 里 */ 
} 
pt{ 
text-indent :2em; /* 设 置 文 本 缩 进 */ 
line-height:30px; /* 设 置 行 高 的 大 小 */ 
); 
hl{text-align:center;} /* 设 置 标题 居中 显示 */ 
</style> 
</head> 
<body> 
<h1> 兰 享 序 </h1> 
<p> 永 和 九 年 ， 岁 在 癸 (gui) 丑 ， 暮 春之 初 ， 会 于 会 稽 (kuai ji) 山 阴 之 兰亭 ， 修 神 (xi) 事 
也 。 群 贤 毕 至 ， 少 长 咸 集 。 此 地 有 崇山峻岭 ， 茂 林 修 竹 ， 又 有 清流 激 油 (tuan) ， 了 映 带 左右 。 引 以 为 流 
筋 (shang) 曲 (qa) 水 ， 列 坐 其 次 ， 虽 无 丝竹 管弦 之 盛 ， 一 筋 一 咏 ， 亦 足以 畅 叙 幽 情 。</P> 
<p> 是 日 也 ， 天 朗 气 清 ， 惠 风 和 畅 。 仰 观 宇宙 之 大 ， 俯 察 品类 之 盛 ， 所 以 游 目 鸡 (ché&ng) 怀 ， 足 
以 极 视 听 之 娱 ， 信 可 乐 也 。</p> 
<p> 夫人 之 相 与 ， 俯 仰 一 世 。 或 取 诸 怀抱 ， 晤 言 一 室 之 内 ; 或 因 寄 所 托 ， 放 浪 形 通 (hki) 之 外 。 
虽 趣 (qii) 含 万 殊 ， 静 躁 不 同 ， 当 其 欣 于 所 遇 ， 和 暂 得 于 己 ， 快 然 自 足 ， 不 知 老 之 将 至 。 及 其 所 之 既 倦 ， 
情 随 事 迁 ， 感 慨 系 (xi ) 之 矣 。 向 之 所 欣 ， 俯 仰 之 间 ， 已 为 陈 迹 ， 狂 不 能 不 以 之 兴 怀 。 况 修 短 随 化 ， 终 
期 于 尽 。 古 人 云 : “死生 亦 大 括 。” 岂 不 痛 哉 ! </p> 
<p> 每 览 音 人 兴 感 之 由 ， 若 合 一 契 ， 未 尝 不 临 文 唆 (jis) 悼 ， 不 能 喻 之 于 怀 。 固 知 一 死生 为 虚 诞 ， 
齐 彭 爽 (shang) 为 亡 作 。 后 之 视 今 ， 亦 犹 今 之 视 昔 ， 翡 夫 ! 故 列 叙 时 人 ， 录 其 所 述 。 虽 世 殊 事 异 ， 所 以 
兴 怀 ， 其 致 一 也 。 后 之 览 者 ， 亦 将 有 感 于 斯 文 。</p> 
</body> 
</html> 


在 正 11.0 中 浏览 效果 如 图 13-6 所 示 , 可 以 看 到 网 页 background-attachment 属 性 的 值 为 fixed 
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时 ， 背 景 图 片 的 位 置 固定 并 不 是 相对 于 页 面 的， 而 是 相对 于 页 面 的 可 视 范 围 。 


图 13-6 图 片 显示 方式 


13.1.5 ”背景 图 片 位 置 


我 们 知道 , 背景 图 片 都 从 设置 了 background 属性 网 页 的 左上 和 角 开 始 出 现 , 但 在 实际 网 页 设 
计 中 , 可 以 根据 需要 直接 指定 背景 图 片 出 现 的 位 置 。 在 CSS3 中 ,可 以 通过 background-position 
属性 轻松 调整 背景 图 片 的 位 置 。 

background-position 属性 用 于 指定 背景 图 片 在 页 面 中 所 处 的 位 置 。 该 属性 值 可 以 分 为 4 类 ， 
绝对 定义 位 置 〈length) 、 百 分 比 定义 位 置 (percentage) 、 垂 直 对 齐 值 和 水 平 对 齐 值 。 其 中 垂 
直 对 齐 值 包括 top、center 和 bottom， 水 平 对 齐 值 包括 left、center 和 right， 如 表 13-3 所 示 。 


表 13-3 background-position 属性 值 


属性 值 描述 

length 设置 图 片 与 边 距 水 平和 垂直 方向 的 距离 长 度 ， 后 跟 长 度 单位 (cm、mm、px 等 ) 
percentage 以 页 面 元 素 框 的 宽度 或 高 度 的 百分比 放置 图 片 

top 背景 图 片 顶 部 居中 显示 

center 背景 图 片 居中 显示 

bottom 背景 图 片 底部 居中 显示 

left 背景 图 片 左 部 居中 显示 


right 背景 图 片 右 部 居中 显示 


HTML54CS53+jQvuery Mobile+Bootstrap 开发 APP 从 入 门 到 精通 (视频 教学 版 》 


垂直 对 齐 值 还 可 以 与 水 平 对 齐 值 一 起 使 用 ， 从 而 决定 图 片 的 垂直 位 置 和 水 平 位 置 。 


【 例 13.6】 实例 文件 ，ch13\13.6.html) 

<!DOCTYPE html> 

<html> 

<head> 

<title> 背 景 位 置 设置 </title> 

<style> 

body{ 
background-image:url (xiyang.jpg); /* 设 置 背 景 图 片 */ 
background-repeat:no-repeat; /* 设 置 背景 图 片 不 重复 平 铺 */ 
background-position:top right; /* 设 置 背景 图 片 从 顶部 和 右边 开始 显示 */ 

} 

</style> 

</head><body></body></html> 


在 正 11.0 中 浏览 效果 如 图 13-7 所 示 ， 可 以 看 到 网 页 中 显示 背景 ， 其 背景 是 从 项 部 和 右边 
开始 出 现 的 。 


和 D:\ 村 书 滨 代 码 \code\ 夺 {BNCh10\M 十 ~ 忆 || 二天- Pp- © 
后 从 位 置 设 证 3 
将 和 一 下 ,人 rE 


图 13-7 设置 背景 位 置 


使 用 垂直 对 齐 值 和 水 平 对 齐 值 只 能 格式 化 地 放置 图 片 , 如 果 要 在 页 面 中 自由 地 定义 图 片 的 
位 置 ， 则 需要 使 用 确定 数值 或 百分比 。 此 时 需 将 上 面 代码 中 : 


background-position:top right; 
语句 修改 为 : 


background-position:20px 30px 
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在 正 11.0 中 浏览 效果 如 图 13-8 所 示 ， 可 以 看 到 网 页 中 显示 背景 ， 其 背景 是 从 左上 角 开 始 
出 现 的 ， 开 始 位 置 坐标 为 (20，30) 。 


加 “Dx 丁 书 深 人 友 \code\ 巡 人 吧 ch1Ov 图 - 作 。 近 家 PP" | 从 [3 
ES x 回 
竟 总 二 放下 , 40 翅 


图 13-8 指定 背景 位 置 


13.1.6 ”背景 图 片 大 小 


在 以 前 的 网 页 设计 中 ， 背 景 图 片 的 大 小 是 不 可 以 控制 的 ， 如 果 想 要 图 片 填充 整个 背景 ， 则 
需要 事先 设计 一 个 较 大 的 背景 图 片 ， 要 么 只 能 让 背景 图 片 以 平 铺 的 方式 来 填充 页 面 元 素 。 在 
CSS3 中 ， 新 增 了 一 个 background-size 属性 ， 用 来 控制 背景 图 片 大 小 ， 从 而 降低 网 页 设计 的 开 
发 成 本 。 

background-size 语法 格式 如 下 : 


background-size: [<length>|<percentage>|lauto] {1,2}|coverlcontain 
其 参数 值 含义 如 表 13-4 所 示 。 


表 13-4 background-size 属性 参数 表 


由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 ， 不 可 为 负 值 


<percentage> 取 值 为 0%~100%， 不 可 为 负 值 


cover | 保持 背景 图 像 本 身 的 宽 高 比例 ， 将 图 片 缩放 到 正好 完全 覆盖 所 定义 的 背景 区 域 
contain 保持 图 像 本 身 的 宽 高 比较 ， 将 图 片 缩放 到 宽度 或 高 度 正好 适应 所 定义 的 背景 区 域 


HTJmL5+CSS3+TjQuery Jmobile+Bootstrap 开发 APP 从 入 门 到 精通 〈 视 频 教 学 版 ) 


【 例 13.7】〈 实 例文 件 : ch13\13.7.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 背 景 位 置 设置 </title> 

<style> 

body{ 
background-image:url (xiyang.jpg); /* 设 置 背 景 图 片 */ 
background-repeat:no-repeat; /* 设 置 背 景 图 片 不 重复 平 铺 */ 
background-size:cover; /* 设 置 背 景 图 片 填 满 了 整个 页 面 */ 

} 

</style> 

</head> 

<body> 

</body> 

</html> 


在 下 11.0 中 浏览 效果 如 图 13-9 所 示 ， 可 以 看 到 网 页 中 的 背景 图 片 填充 了 整个 页 面 


【 忆 。Dx 本 书 源 代码 vode\ 江 国 -~ 地 搜索 … A- 
| 所 RE x 区 
请 各 百 许 一 下 , 你 Wn 闭 


图 13-9 设置 背景 大 小 
同样 也 可 以 用 像素 或 百分比 指定 背景 大 小 显示 。 当 指定 为 百分比 时 ， 大 小 会 由 所 在 区 域 的 


宽度 、 高 度 及 background-origin 的 位 置 决定 。 示 例如 下 : 


值 用 


background-size:900 800; 


此 时 background-size 属性 可 以 设置 1 个 或 2 个 值 ，1 个 为 必 填 ，1 个 为 选 填 。 其 中 第 1 个 
于 指导 图 片 宽度 ,第 2 个 值 用 于 指定 图 片 高 度 , 如 果 只 设置 一 个 值 , 则 第 2 个 值 默 认为 auto。 
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13.1.7 ”背景 显示 区 域 

在 网 页 设计 中 ， 如果 能 改善 背景 图 片 的 定位 方式 , 使 设计 师 能 够 更 加 灵活 地 决定 背景 图 片 
应 该 显示 的 位 置 ， 则 会 大 大 减少 设计 成 本 。 在 CSS3 中 ， 新 增 了 一 个 background-origin 属性 ， 
用 来 完成 背景 图 片 的 定位 。 

默认 情况 下 ，background-position 属性 总 是 以 元 素 左上 角 原 点 作为 背景 图 像 定 位 ， 而 
background-origin 属性 可 以 改变 这 种 定位 方式 。 


background-origin: border1lpaddinglcontent 
其 参数 含义 如 表 13-5 所 示 。 


表 13-5 ”background-origin 参数 值 表 


border 从 border 区 域 开始 显示 背景 


padding 从 padding 区 域 开 始 显示 背景 


【 例 13.8】 《实例 文件，chl13\13.8.html) 
<!DOCTYPE html> 


<html> 

<head> 

<title> 背 景 坐标 原点 </title> 

<style> 

divt{ 
text-align:center; /* 设 置 居中 显示 */ 
height:500px; /* 设 置 div 块 的 高 度 */ 
width:416px; /* 设 置 div 块 的 宽度 */ 
border:solid lpx red; /* 设 置 div 块 的 边框 样式 */ 
padding:32px 2em 0; /* 设 置 内 边 距 的 大 小 */ 


background-image:url (15.jpg) ;/* 设 置 背景 图 片 */ 
background-origin:padding; /* 设 置 从 padding 区 域 开始 显示 背景 */ 
} 
div hi{ 
font-size:18px; 
font-family:" 幼 圆 "; 
| 
div pt{ 
text-indent :2em; 
line-height:2em; 
font-family: "楷体 "; 
} 
</style> 
</head> 
<body> 
<div> 
<h1> 美 科学 家 发 明 时 光 斗 篷 在 时 间 中 隐瞒 事件 </h1> 
<p> 本 报 讯 据 美国 《技术 评论 》 杂 志 网 站 7 月 15 日 报道 ， 日 前 ， 康 奈 尔 大 学 的 莫 蒂 。 弗 里 德 曼 和 其 
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同事 在 前 人 研究 的 基础 上 ， 设 计 并 制造 出 了 一 种 能 在 时 间 中 隐瞒 事件 的 时 光 斗 舌 。 相 关 论 文 发 表 在 国际 
著名 学 术 网 站 arXiv.org 上 。</p> 

<p> 近 年 来 有 关 隐 身 斗 篷 的 研究 不 断 取得 突破 ， 其 原理 是 通过 特殊 的 材料 使 途经 的 光线 发 生 扭曲 
从 而 让 斗篷 下 的 物体 “ 隐 于 无 形 ”。 第 一 个 隐身 斗篷 只 在 微波 中 才 有 效果 ， 但 短 短 几 年 ， 物 理学 家 已 经 
发 明 出 了 能 用 于 可 见 光 的 隐身 斗篷 ， 能 够 隐藏 声音 的 “ 隐 声 斗篷 ”和 能 让 一 个 物体 看 起 来 像 其 他 物体 的 
“错觉 斗篷 ”。</p> 

</div> 

</body> 

</html> 


在 正 11.0 中 浏览 效果 如 图 13-10 所 示 , 可 以 看 到 背景 图 片 以 指定 大 小 于 网 页 左 侧 显 示 , 在 
背景 图 片上 显示 了 相应 的 段落 信息 。 


| 各“DN 厅 书 源 fIvcode 亚 国 ”中 搜索 - DP- 
| 局 少时 坐标 原点 x 上 
部 兴 百 度 一 下 4 


图 13-10 设置 背景 显示 区 域 


13.1.8 背景 图 像 裁剪 区 域 

在 CSS3 中 ， 新 增 了 一 个 background-clip 属性 ， 用 来 定义 背景 图 片 的 裁剪 区 域 。 
background-clip 属性 和 background-orgin 属性 有 几 分 相似 , 通俗 地 说 ,background-clip 属性 用 来 
判断 背景 是 否 包 含 边框 区 域 ， 而 background-orgin 属性 用 来 决定 background-position 属性 定位 
的 参考 位 置 。 

background-clip 语法 格式 如 下 : 


background-clip: border-box|lpadding-box|lcontent-box|lno-clip 


其 参数 值 含义 如 表 13-6 所 示 。 
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表 13-6 ”background-clip 参数 值 表 


参数 值 说 明 


参数 值 说 明 


从 border 区 域 开 始 显示 背景 


从 padding 区 域 开始 显示 背景 


【 例 13.9】 实例 文件 :ch13\13.9.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 背 景 裁 前 </title> 

<style> 

divt{ 
height:300px; 
width:200px; 
border:dotted 50px red; 
padding:50px; 
background-image:url (18.jpg); 
background-repeat :no-repeat; 
background-clip:content;} 

</style> 

</head> 

<body> 

<div> 

</div> 

</body> 

</html> 


content 从 content 区 域 开始 显示 背景 
no-clip 从 边框 区 域外 裁剪 背景 


/* 设 置 div 块 的 高 度 */ 

/* 设 置 div 块 的 宽度 */ 

/* 设 置 边框 的 样式 */ 

/* 设 置 内 边 距 的 大 小 */ 

/* 设 置 背 景 图 片 */ 

/* 设 置 背 景 图 片 不 重复 平 铺 */ 

/* 背景 图 像 仅 在 内 容 区 域 中 显示 */ 


在 卫 11.0 中 浏览 效果 如 图 13-11 所 示 ， 可 以 看 到 网 页 中 背景 图 像 仅 在 内 容 区 域内 显示 。 


站 mu 
次 注 ER 下 cats 


图 13-11 


以 内 容 边缘 裁剪 背景 图 
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13.1.9 背景 复合 属性 


在 CSS3 中 ，background 属性 依然 保持 了 一 起 的 用 法 ， 即 综合 以 上 所 有 与 背景 有 关 的 属性 
〈 即 以 back-ground- 开 头 的 属性 ) 一 次 性 地 设置 背景 样式 。 格 式 如 下 : 


background: [background-color] [background-image] [background-repeat] 
[background-attachment] [background-position] 
[background-size] [background-clip] [background-origin] 


其 中 的 属性 顺序 可 以 自由 调换 并 且 可 以 选择 设置 , 对 于 没有 设置 的 属性 系统 会 自行 为 该 属 
性 添加 默认 值 。 例 如 ， 定 义 背景 样式 规则 如 下 : 


body 

{ 
background-color:black; /* 设 置 背 景 颜色 */ 
background-image:url (bk1.jpg); /* 设 置 背 景 图 片 */ 
background-position:center; /* 设 置 背 景 图 片 居中 显示 */ 
background-repeat:repeat-—x; /* 设 置 背 景 图 片 水 平平 铺 */ 
background-attachment :fixed; /* 设 置 背 景 图 片 固定 在 可 见 区 域 里 */ 


background-size:900 800; /* 设 置 背 景 图 片 的 大 小 */ 
background-origin:padding; /x 设 置 从 padding 区 域 开 始 显示 背景 */ 
background-clip:content; /x* 从 content 开 始 剪 切 背景 图 片 */ 


13.2 边框 


在 网 页 设计 中 ，HTML 元 素 会 占有 一 定 的 区 域 ， 如 <a> 标 记 、<p> 标 记 等 ， 对 于 这 些 标记 
可 以 通过 CSS3 的 width 和 height 设置 其 大 小 ， 并 通过 border 设置 其 边框 样式 。 

边框 就 是 将 元 素 内 容 及 间隙 包含 在 其 中 的 边线 ， 类 似 于 表格 的 外 边线 。 每 一 个 页 面 元 素 的 
边框 可 以 从 3 个 方面 来 描述 : 宽度 、 样 式 和 颜色 ， 这 3 个 方面 决定 了 边框 所 显示 出 来 的 外 观 。 
CSS3 中 分 别 使 用 border-style、border-width 和 border-color 3 个 属性 设置 边框 的 3 个 方面 。 


13.2.1 边框 样式 

在 进行 网 页 排版 时 ， 有 时 需要 指定 某 个 区 域 的 元 素 ， 并 将 这 些 元 素 与 其 他 元 素 区 别 开 来 ， 
这 时 可 以 让 HTML 元 素 带 有 边框 并 设置 HTML 边框 样式 。 

border-style 属性 用 于 设置 边框 的 样式 ， 也 就 是 风格 。 设 置 边 框 格式 是 边框 最 重要 的 部 分 
它 主要 用 于 为 页 面 元 素 添 加 边框 。 其 语法 格式 如 下 : 


border-style:nonelhiddenldottedldashedlsolidldoublelgroove1ridgelinsetl 
outset 
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CSS3 设置 了 9 种 边框 样式 ， 如 表 13-7 所 示 。 
表 13-7 边框 样式 属性 值 


属性 值 描述 

none 无 边框 ， 无 论 边框 宽度 设 为 多 大 
dotted 点 线 式 边框 

dashed 破 折线 式 边框 

solid 直线 式 边框 

double 双 线 式 边框 

groove 槽 线 式 边框 

ridge 将 线 式 边框 

inset 内 嵌 效 果 的 边框 

outset 突起 效果 的 边框 


【 例 13.10】〔 实 例文 件 ，ch13\13.10.html) 

<!DOCTYPE html> 

<html> 

<head> 

<title> 边 框 设 置 </title> 

<style> 

hil{ 
border-style:dotted; /* 点 线 式 边框 */ 
color: black; /* 设 置 标题 颜色 */ 
text-align:center; /* 设 置 标 题 居 中 显示 */ 

} 

pt{ 
border-style:double; /* 双 线 式 边框 */ 
text-indent :2em; /* 设 置 文本 缩 进 */ 

) 

</style> 

</head> 

<body> 

<h1> 带 有 边框 的 标题 </h1> 

<p> 带 有 边框 的 段落 </p> 

</body> 

</html> 


在 正 11.0 中 浏览 效果 如 图 13-12 所 示 ， 可 以 看 到 网 页 中 标题 hl 显示 的 时 候 带 有 边框 ， 其 
边框 样式 为 点 线 式 边框 ， 同 样 段落 也 带 有 边框 ， 其 边框 样式 为 双 线 式 边框 。 
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在 没有 设置 边框 磊 色 的 情况 下 ，groove、ridge、inset 和 outset 边框 默认 的 颜色 是 友 
0 色 ; dotted、dashed、solid 和 double 这 4 种 边框 的 颜色 基于 页 面 元 素 的 color 值 。 


加 oo。 *x 
可 DERwcodeg 国 并 案 - Pp- 
SS nem “BB 
弃 - 下 . fa 


其 实 , 这 几 种 边框 样式 还 可 以 分 别 定义 在 一 个 边框 中 ， 从 上 边框 开始 按照 顺 时 针 的 方向 分 
别 定 义 边框 的 上 、 右 、 下 、 左 边框 样式 ， 从 而 形成 多 样式 边框 。 例 如 ， 有 下 面 一 条 样式 规则 : 


图 13-12 设置 边框 


p{border-style:dotted solid dashed groove} 
另外 ， 如 果 需 要 单独 定义 边框 的 一 条 边 的 样式 ， 则 可 以 使 用 如 表 13-8 所 列 的 属性 来 定义 。 
表 13-8 边 样式 定义 属性 


设置 下 边框 的 样式 
设置 左边 框 的 样式 


13.2.2 ”边框 颜色 

在 网 页 设计 中 ,设计 者 不 但 可 以 设置 边框 样式 ， 还 可 以 设置 边框 颜色 ， 从 而 增强 边框 的 效 
果 。border-color 属性 用 于 设置 边框 颜色 ， 如 果 不 想 与 页 面 元 素 的 颜色 相同 ， 则 可 以 使 用 该 属性 
为 边框 定义 其 他 颜色 。 

border-color 属性 语法 格式 如 下 : 


border-color:color 


color 表示 指定 颜色 ， 其 颜色 值 通过 十 六 进 制 或 RGB 等 方式 获取 。 
与 边框 样式 属性 一 样 ，border-color 属性 可 以 为 边框 设置 一 种 颜色 ， 也 可 以 同时 设置 4 个 
边 的 颜色 。 
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【 例 13.11】〈 实 例文 件 : ch13\13.11.html) 


<!DOCTYPE html> 

<html> 

<head> 

<tit1le> 边 框 颜色 设置 </title> 

<style> 

pt{ 
border-style:double; 
border-color:red; 
text-indent:2em; 

} 

</style> 

</head> 

<body> 

<p> 边 框 颜色 设置 </p> 

<p style="border-style:solid; border-color:red blue yellow green"> 

分 别 定 义 边框 颜色 </p> 

</body> 

</html> 


在 下 11.0 中 浏览 效果 如 图 13-13 所 示 , 可 以 看 到 网 页 中 第 一 段落 边框 颜色 设置 为 红色 , 第 
-段落 边框 颜色 分 别 设置 为 红 、 蓝 、 黄 和 绿 。 


- DO x 
@ 稳 ”D:\ 本 书 源 代码 \code 浊 图 ”搜索 .. 

局 边 杠 颜色 设 置 有 

请 全 百 度 一 下 ， 你 就 知道 


运往 硕 色 设计 


分 别 定义 边框 名 


图 13-13 ”设置 边框 颜色 


除了 上 面 设 置 4 个 边框 颜色 的 方法 之 外 ， 还 可 以 使 用 表 13-9 列 出 的 属性 单独 为 相应 的 边 
框 设置 颜色 。 


表 13-9 相应 的 边框 颜色 设置 属性 
描述 

设置 上 边框 颜色 

设置 右边 框 颜色 
设置 下 边框 颜色 

设置 左边 框 颜色 


属性 


border-top-color 


border-right-color 


border-bottom-color 


border-left-color 
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13.2.3 ”边框 线 宽 

在 CSS3 中 ， 可 以 通过 设置 边框 线 宽 来 增强 边框 效果 。border-width 属性 可 以 用 来 设置 边 
框 宽度 ， 其 语法 格式 如 下 : 

border-width:medium|lthinlthick|llength 


其 中 预 设 有 3 种 属性 值 : medium、thin 和 thick。 还 可 以 自行 设置 宽度 (width) ,如 表 13-10 
所 示 。 


表 13-10 ”边框 线 宽 属 性 值 


EECTIEZZT 


比 medium 粗 


【 例 13.12】〔 实 例文 件 ，ch13\13.12.html) 


<!DOCTYPE html> 
<html> 
<head> 
<title> 边 框 宽度 设置 </title> 
</head> 
<body> 
<p style="border-style:dotted; border-width:medium; "> 边框 颜色 设置 </p> 
<p style="border-style:dashed;border-width:thin; "> 边框 颜色 设置 </p> 
<p style="border-style:solid; border-width:12pxz"> 分 别 定义 边框 颜色 </p> 
</body> 
</html> 


在 下 11.0 中 浏览 效果 如 图 13-14 所 示 ， 可 以 看 到 网 页 中 3 个 段落 边框 以 不 同 的 粗细 显示 。 


图 13-14 设置 边框 线 宽 
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border-width 属性 其 实 是 border-top-width 、borderright-width 、border-bottom-width 和 
border-left- width 4 个 属性 的 综合 属性 , 分 别 用 于 设置 上 边框 、 右 边框 、 下 边框 、 左 边框 的 宽度 。 


【 例 13.13】〔 实 例文 件 ，ch13\13.13.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 边 框 宽度 设置 </title> 

<style> 

p{ 

border-style:solid; /* 直 线 式 边框 */ 
border-color:#ff00ee; /* 设 置 边框 的 颜色 */ 
border-top-width:medium; /* 定 义 中 等 的 上 边框 */ 
border-right-width:thin; /* 定 义 细 的 右边 框 */ 
bottom-width:thick; /* 定 义 粗 的 下 边框 */ 
border-left-width:15px; /* 定 义 左边 框 的 粗细 */ 
;; 

</style> 

</head> 

<body> 

<p> 边 框 宽度 设置 </p> 

</body> 

</html> 


在 下 11.0 中 浏览 效果 如 图 13-15 所 示 , 可 以 看 到 网 页 中 段落 的 4 个 边框 以 不 同 的 宽度 显示 。 


一 口 x 
知 ”D:\ 本 书 源 代码 \code 衣 图 ~ 搜索 .… 

并 边框 亮度 设置 x [3 

再 当 百 度 一 下 ,你 就 知道 


边框 宽度 议 置 


图 13-15 分 别 设置 4 个 边框 宽度 


13.2.4 ”边框 复合 属性 


border 属性 集合 了 上 述 所 介绍 的 3 种 属性 ， 为 页 面 元 素 设置 边框 的 宽度 、 样 式 和 颜色 。 语 
法 格式 如 下 : 


border:border-width border-style border-color 


其 中 ，3 个 属性 顺序 可 以 自由 调换 。 
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【 例 13.14】 实例 文件 :ch13\13.14.html) 

<!DOCTYPE html> 

<html> 

<head> 

<title> 边 框 复合 属性 设置 </title> 

</head> 

<body> 

<p style="border:dashed red 12px"> 边 框 复合 属性 设置 </p> 
</body> 

</html> 


在 下 11.0 中 浏览 效果 如 图 13-16 所 示 , 可 以 看 到 网 页 中 段落 边框 样式 以 破 折 线 显 示 , 颜色 
为 红色 ， 线 宽 为 12 像素 。 


【 人 ”D:\ 地 书 源 代码 \code 图 -~ | 搜索 只 - 

| 后 边 IE 复生 属性 设 和 x 区 

次 委 二 度 一 下 , 你 M0 首 

| LL [| 

蚂 / 虹 加 加 于 
[| 


图 13-16 边框 复合 属性 设置 


13.3 圆 角 边框 


在 CSS3 标准 没有 指定 之 前 ， 如 果 想 要 实现 圆 角 效果 ， 则 需要 花费 很 多 时 间 去 实现 。 一 方 
面 需要 照顾 大 多 数 的 低 版 本 下 用 户 ， 另 一 方面 还 需要 兼容 各 种 浏览 器 的 私有 属性 。 在 CSS3 
标准 推出 后 ， 网 页 设计 者 可 以 使 用 border-radius 属性 轻松 实现 圆 角 效果 。 


13.3.1 圆 角 边 框 属性 


在 CSS3 中 ， 可 以 使 用 border-radius 属性 定义 边框 的 圆 角 效果 ， 从 而 大 大 降低 了 圆 角 开发 
的 成 本 。border-radius 的 语法 格式 如 下 : 


border-radius: nonel<length>{1,4} [/<length>{1,4}]? 
其 中 ，none 为 默认 值 ， 表 示 元 素 没有 圆 角 ; <length> 表 示 由 浮 点 数字 和 单位 标识 符 组 成 的 
长 度 值 ， 不 可 为 负 值 。 


【 例 13.15】〔 实 例文 件 ，ch13\13.15.html) 


<!DOCTYPE html> 
<html> 
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示 圆 角 
一 个 值 相同 ， 表 示 这 个 角 就 是 一 个 1/4 的 圆 
显示 为 圆 角 。 


<head> 
<title> 圆 角 边框 设置 </title> 
<style> 
p{text-align:center; 
border:15px solid red; ”/* 设 置 边 框 的 样式 */ 
width:100px; 
height:50px; 
border-radius:10px; /* 设 置 圆 角 边框 的 半径 */ 
} 
</style> 
</head> 
<body> 
<p> 这 是 一 个 圆 角 边框 </p> 
</body> 
</html> 


在 正 11.0 中 浏览 效果 如 图 13-17 所 示 , 可 以 看 到 网 页 中 段落 边框 显示 时 以 圆 角 显示 , 其 半 


径 为 10 像素 。 


se 口 x 
站 D:\ 本 书 源 代码 \code 谤 图 ~” 中 搜索. 
扎 ”图 角 边 柜 设置 站 
雇 全 百度 一 下 ， 你 8 知道 


图 13-17 定义 圆 角 边框 


13.3.2 ”指定 两 个 圆 角 半径 


可 以 使 用 border-radius 属性 设置 一 个 参数 来 绘制 圆 角 ， 同 样 也 可 以 使 用 两 个 参数 绘 来 制 圆 
角 。border-radius 属性 可 以 包含 两 个 参数 值 ， 第 一 个 参数 表示 圆 角 的 水 平 半径 ， 第 二 个 参数 表 
的 垂直 半径 ， 两 个 参数 通过 斜 线 (“/”) 隔 开 。 如 果 仅 含 一 个 参数 值 ， 则 第 二 个 值 与 第 
; 如 果 参 数值 中 包含 0， 则 这 个 值 就 是 和 矩形， 不 会 


【 例 13.16】《 实 例文 件 : ch13\13.16.html) 
<!DOCTYPE html> 

<html> 

<head> 

<title> 圆 角 边框 设置 </title> 

<style> 

-pl{ 
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text-align:center; 
border:15px solid red;  /* 设 置 边框 的 样式 */ 
width:100px; 
height:50px; 
border-radius:5px/50px; /* 增 加 圆 角 边框 */ 
} 
-p21{ 
text-align:center; 
border:15px solid red;  /* 设 置 边框 的 样式 */ 
width:100px; 
height:50px; 
border-radius:50px/5px; /* 增 加 圆 角 边框 */ 
} 
</style> 
</head> 
<body> 
<p class=p1> 这 是 一 个 圆 角 边框 A</p> 
<p class=p2> 这 也 是 一 个 圆 角 边框 B</p> 
</body> 
</html> 


在 正 11.0 中 浏览 效果 如 图 13-18 所 示 , 可 以 看 到 网 页 中 显示 了 两 个 圆 角 边框 , 第 一 段落 圆 
角 半 径 为 5 像素 /50 像素 ， 第 二 段落 圆 角 半径 为 50 像素 /5 像素 。 


三 ,加 
基 D:\ 本 书 洒 代码 \codeVj 图 -中 搜索 .… 
| 后 国生 边框 设 闭 3 
请 各 百度 一 下 ,你 就 知道 


这 也 征 一 个 图 
角 边 框 B 


图 13-18 定义 不 同 半径 圆 角 边框 


13.3.3 ”绘制 4 个 不 同 圆 角 边框 

有 时 为 了 网 页 需要 , 可 以 为 圆 角 边框 设置 不 同 半径 的 圆 角 , 其 样式 就 会 更 加 漂亮 。 在 CSS3 
中 ， 实 现 4 个 不 同 圆 角 边框 有 两 种 方法 : 一 种 是 使 用 border-radius 属性 ; 另 一 种 是 使 用 
border-radius 衍生 属性 。 


1. border-radius 属性 
第 一 种 方法 就 是 利用 border-radius 属性 为 其 研一 组 值 。 当 为 border-radius 属性 赋 一 组 值 时 
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将 遵循 CSS 规则 ， 可 以 包含 2~4 个 属性 值 ， 此 时 无 法 使 用 斜 杠 定 义 圆 角 水 平和 垂直 半径 。 


如 果 直 接 给 border-radius 属性 赋 4 个 值 ， 那 么 这 4 个 值 将 按照 top-left、top-right、 


bottom-right、bottom-left 的 顺序 来 设置 。 如 果 bottom-left 值 省 略 ， 则 其 圆 角 效 果 和 top-right 效 
果 相 同 ; 如 果 bottom-right 值 省 略 , 则 其 圆 角 效果 和 top-left 效果 相同 ; 如 果 top-right 的 值 省 略 ， 
则 其 圆 角 效果 和 top-left 效果 相同 。 如 果 为 border-radius 属性 设置 4 个 值 的 集合 参数 ， 则 每 个 
值 表 示 每 个 角 的 圆 角 半径 。 


【 例 13.17】 实例 文件 :ch13\13.17.html) 

<!DOCTYPE html> 

<html> 

<head> 

<title> 圆 角 边框 设置 </title> 

<style> 

-divi{ 
border:15px solid blue; 
height:100px; 
border-radius:10px 30px 50px 70px; 

} 

.div2{ 
border:15px solid blue; 
height:100px; 
border-radius:10px 50px 70px; 

} 

.div3{ 
border:15px solid blue; 
height:100px; 
border-radius:10px 50px; 

} 

</style> 

</head> 

<body> 


<div class=divl></div><br /> 
<div class=div2></div><br /> 
<div class=div3></div> 
</body> 

</html> 


在 正 11.0 中 浏览 效果 如 图 13-19 示 , 可 以 看 到 网 页 中 第 一 个 div 层 设置 了 4 个 不 同 的 圆 角 


边框 ， 第 二 个 div 层 设置 了 3 个 不 同 的 圆 角 边框 ， 第 三 个 div 层 设置 了 两 个 不 同 的 圆 角 边框 。 


279 。 
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图 13-19 设置 4 个 圆 角 边框 


2. border-radius 衍生 属性 
除了 上 面 设置 圆 角 边框 的 方法 之 外 ， 还 可 以 使 用 如 表 13-11 列 出 的 属性 单独 为 相应 的 边框 
设置 圆 角 。 


表 13-11 border-radius 衍生 属性 


| 


border-bottom-right-radius 定义 右 下 角 圆 角 
border-bottom-left-radius 定义 左下 角 圆 角 
border-top-left-radius 定义 左上 角 圆 角 


【 例 13.18】〈 实 例文 件 : chl3\13.18.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 圆 角 边框 设置 </title> 

<style> 

.divt{ 
border:15px solid blue; 
height:100px; 
border-top-left-radius:70px; 
border-bottom-right-radius:40px; 

</style> 

</head> 
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<body> 
<div class=div></div><br /> 
</body> 
</html> 


在 正 11.0 中 浏览 效果 如 图 13-20 所 示 ， 可 以 看 到 网 页 中 设置 的 两 个 圆 角 边框 ， 分 别 使 
border-top-left-radius 和 border-bottom-right-radius 指定 。 


间 _D:\ 本 书 源 代码 YcodeW 图 ” 吃 搜 索 - 
局 国 角 边框 设置 x 加 
竟 当 百度 一 下 ， 你 就 知道 


图 13-20 ”绘制 指定 圆 角 边框 


13.3.4 ”绘制 边框 种 类 

border-radius 属性 可 以 根据 不 同 的 半径 值 来 绘制 不 同 的 圆 角 边框 ， 同 样 也 可 以 利用 
border-radius 来 定义 边框 内 部 的 圆 角 ， 即 内 圆 角 。 需 要 注意 的 是 ， 外 部 圆 角 边框 的 半径 称 为 外 
半径 ， 内 边 半径 等 于 外 边 半径 减 去 对 应 边 的 宽度 ， 即 将 边框 内 部 圆 的 半径 称 为 内 半径 。 

通过 外 半径 和 边框 宽度 的 不 同 设置 , 可 以 绘制 出 不 同形 状 的 内 边框 , 如 内 直角 、 小 内 圆 角 、 
大 内 圆 角 和 圆 。 


【 例 13.19】〔 实 例文 件 ，ch13\13.19.html) 


<!DOCTYPE html> 
<html> 
<head> 
<title> 圆 角 边 框 设置 </title> 
<style> 
-divi{ 
border:70px solid blue; 
height:50px; 
border-radius:40px;} 
.div2{ 
border:30px solid blue; 
height:50px; 
border-radius:40px;} 
.div3{ 
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border:10px 


solid blue; 


height:50px; 
border-radius:60px;} 


-div41{ 


borqer:1px solid blue; 
height:100px; 
width:100px; 
border-radius:50px;} 


</style> 
</head> 
<body> 


<div class=divl></div><br /> 
<div class=div2></div><br /> 
<div class=div3></div><br /> 
<div class=div4></div><br /> 


</body> 
</html> 


在 正 11.0 中 浏览 
框 内 角 为 小 圆 角 ， 第 3 个 边框 内 角 为 大 圆 角 ， 第 4 个 边框 为 圆 。 


效果 如 图 13-21 所 示 , 可 以 看 到 网 页 中 第 一 个 边框 内 角 为 直角 , 第 二 个 边 


CT TT - 蔬 | 本 Dr- © 
局 加 旬 志 醒 没 而 a 
富生- 下 favam 


CC 


CC  ) 


图 13-21 绘制 不 同 种 类 边框 


当 边 框 宽度 设置 大 于 圆 角 外 半径 ， 即 内 半径 为 0 时， 就 会 显示 内 直角 ， 而 不 是 圆 直角 ， 所 
以 内 外 边 曲线 的 圆心 必然 是 一 致 的 ( 见 上 例 中 第 一 种 边框 设置 )。 如 果 边 框 宽度 小 于 圆 角 半径 ， 


即 内 半径 小 于 0， 则 会 


显示 小 幅 圆 角 效果 ( 见 上 例 中 第 二 个 边框 设置 )。 


如 果 边 框 宽度 设置 远 


远 小 于 圆 角 半径 ， 即 内 半径 远 远 大 于 0， 则 会 显示 大 幅 圆 角 效果 ( 见 上 例 中 第 3 个 边框 设置 ) 。 
如 果 设 置 元 素 相同 ， 同 时 设置 圆 角 半径 为 元 素 大 小 的 一 半 ， 则 会 显示 圆 


框 设置 ) 。 


见 上 例 中 的 第 4 个 边 
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13.4 ”图 片 边框 


在 CSS3 中 ,为 了 增强 边框 效果 ， 特 意 新 增 了 一 个 属性 border-image， 用 来 控制 边框 图 片 。 
实际 上 该 属性 与 background-image 属性 功能 相似 ， 只 不 过 它 的 功能 更 强大 一 些 。 


13.4.1 ”图片 边框 属性 


border-image 是 CSS3 新 增 核心 属性 之 一 ， 也 是 一 个 非常 实用 的 属性 ， 它 可 以 设置 border 
边框 的 背景 图 。 但 可 惜 的 是 ， 目 前 浏览 器 对 其 支持 不 是 太 好 。 例 如 Webkit 引擎 支持 
-Webkit-border-image 私有 属性 、Mozilla Gecko 引擎 支持 -moz0-borer-image 私有 属性 、Presto 
引擎 支持 -o-border-image 私有 属性 。 

border-image 语法 格式 如 下 : 


border-image: nonel<image> [ <number>|<percentage>]{1,4} 
[/<border-width>{1,4}]? [stretch|repeat|lround] {0,2} 


其 参数 含义 如 表 13-12 所 示 。 
表 13-12 图 片 边框 属性 参数 
| none | 全 无 有 最 图 
使 用 绝对 或 相对 url 地 址 指定 背景 图 像 
边框 宽度 或 边框 背景 图 像 大 小 ， 使 用 固定 像素 值 表示 
设置 边框 背景 图 像 大 小 ， 即 边框 宽度 ， 用 百分比 表示 
拉 伸 | 重复 | 平 铺 (其 中 stretch 是 默认 值 ) 


为 了 方便 设计 师 更 加 灵活 地 定义 边框 的 背景 图 像 ，CSS3 允许 将 border-image 属性 派生 出 
众多 子 属性 ， 一 方面 CSS3 将 border-image 分 成 了 8 个 部 分 ， 使 用 8 个 子 属 性 分 别 定义 特定 方 
位 上 边框 的 背景 图 像 ， 具 体 属 性 如 表 13-13 所 示 。 


表 13-13 border-image 派生 属性 


派生 属性 说 明 
border-top-image 定义 顶部 边框 背景 图 像 


border-right-image 定义 右 侧 边框 图 像 
border-bottom-image 定义 底部 边框 图 像 
border-left-image 定义 左 侧 边 框图 像 
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( 续 表 ) 
派生 属性 说 明 
border-top-left-image 定义 左上 角 边 框图 像 
border-top-right-image 定义 右上 角 边框 图 像 
border-bottom-left-image 定义 左下 角 边 框图 像 
border-bottom-right-image 定义 右 下 角 边框 图 像 


另 一 方面 ，border-image 还 派生 了 如 表 13-14 所 示 的 几 个 属性 。 


表 13-14 border-image 派生 属性 


定义 边框 的 背景 图 像 源 ， 即 图 像 URL 
定义 如 何 裁 切 背 景 图 像 ， 与 背景 图 像 的 定位 功能 不 同 
定义 边框 背景 图 像 的 重复 性 


border-image-width 定义 边框 背景 图 像 的 现实 大 小 ， 虽 然 W3C 定义 了 该 属性 ， 但 浏览 器 
还 是 习惯 使 用 border-width 实现 相同 的 功能 


定义 边框 背景 图 像 的 偏 移 位 置 


13.4.2 ”设置 图 像 边框 显示 方式 


可 以 看 出 border-image 是 一 个 复合 属性 ， 包 含 图 像 源 、 剪 裁 位 置 和 重复 性 。 例 如 ， 
border-image:url (1.jpg) 50 no-repeat 样式 就 表示 边框 背景 图 像 为 1jpg， 剪 裁 位 置 50 像素 ， 禁 止 
重复 。border-image 属性 使 用 urlO 调 用 背景 图 像 ， 图 像 可 以 是 相对 路 径 或 绝对 路 径 ， 也 可 以 不 
适用 图 像 ， 即 border-image:none。 

border-image 属性 最 让 人 迷惑 的 地 方 就 是 其 第 二 个 参数 值 , 剪裁 位 置 , 即 boder-image-slice。 
boder-image-slice 用 法 比较 特殊 ， 该 属性 值 没 有 单位 ， 默 认 单 位 为 像素 ， 支 持 百 分 比值 ， 百 分 
比值 是 相对 于 边框 图 像 而 言 的 .例如 ,边框 图 像 大 小 为 400 像素 X300 像素 , 当 border-image-slice 
属性 值 为 20% 时 ， 实 际 的 效果 就 是 剪裁 了 图 像 的 60 像素 、80 像素 、60 像素 、80 像素 的 四 边 
大 小 ， 然 后 获取 原来 图 像 一 定 比 例 的 图 像 。 如 果 border-image-slice 使 用 的 是 数值 ， 就 表示 按 数 
值 大 小 对 原 图 像 进行 裁剪。 

当 使 用 boder-image-slice 图 像 将 图 片 按 百分比 或 数值 进行 裁剪 后 ， 就 会 获取 一 定数 量 的 图 
像 ， 然 后 将 这 些 图 像 重 新 安置 到 边框 背景 上 ， 这 时 图 像 非 常 容易 发 生变 形 。 这 个 与 CSS 中 clip 
属性 非常 相似 。border-image-slice 属性 值 标准 包含 4 个 参数 ， 它 遵循 CSS 方位 规则 ， 按 照 上 、 
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右 、 下 、 左 的 顺 时 针 方向 赋值 剪裁 。 对 于 第 3 个 属性 ， 图 像 重 复 性 ， 会 在 下 一 个 小 节 介绍 。 
使 用 示例 如 下 所 示 。 


border-image:url (images/a.jpg) 0 12 0 12 stretch stretch 


上 述 代 码 中 ，url 表示 获取 图 片 ，“0 12 0 12” 表 示 按 顺 时 针 设 置 边 框 宽度 ， 即 裁剪 图 像 ， 
也 可 以 简写 为 “0 12”; 第 一 个 “stretch” 表 示 在 水 平方 向 上 延伸 ;第 二 个 “stretch” 表 示 在 垂 
直方 向 上 延伸 。 


【 例 13.20】 实 例文 件 ，ch13\13.20.html) 


<!DOCTYPE html> 

<html> 

<head> 

<style> 

div 

{ 

border:15px solid transparent; 
width:300px; 

padding:10px 20px;} 


#round 

|! 

-moz-border-image:url(1.png) 30 30 round; /* Old Firefox */ 
-Webkit-border-image:url(1.png) 30 30 round; /* Safari and Chrome */ 
-o-border-image:url(1.png) 30 30 round; /* Opera */ 
border-image:url(1.png) 30 30 round;} 

#stretch 

{ 

-moz-border-image:url(1.png) 30 30 stretch; /* Old Firefox */ 
-Webkit-border-image:url(1.png) 30 30 stretch; /* Safari and Chrome */ 
-o-border-image:url(1.png) 30 30 stretch; /* Opera </ 
border-image:url(1.png) 30 30 stretch;} 

</style> 

</head> 

<body> 


<p> 使 用 的 原始 图 片 如 下 : </p> 

<img src="1.png"> 

<p>border-image 属性 规定 了 边框 的 图 片 。</p> 

<div id="round"> 图 片 铺 满 整 个 边框 。</div> 

<br /> 

<div idq="stretch"> 图 片 被 拉 伸 以 填充 该 区 域 。</div> 
</body> 

</html> 


在 正 11.0 中 浏览 效果 如 图 13-22 所 示 。 
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- DO Xx 
上 “DA 本 书 源 代 了 vcode 国 ” 目 按 天 hr 
大 D*\ 丰 书 源 代 码 Ycode\ 深 代 .. x | 
三 名 -下 , fn 
使 用 的 原始 图 片 如 下 : 
border-image 属性 规定 了 边框 的 图 片 。 
ee 
图 片 铺 满 整 个 边框 
OO 
图 片 被 拉 伸 以 填充 该 区 域 。 
ao 
图 13-22 边框 背景 显示 
此 时 设置 下 面 语句 : 
#round 
{ 
-moz-border-image:url(1.png) 81; /* Old Firefox */ 
-Webkit-border-image:url(1.png) 81; /* Safari and Chrome */ 
-o-border-image:url(1.png) 81; /* Opera */ 


border-image:url(1.png) 81;} 


在 正 11.0 中 浏览 效果 如 图 13-23 所 示 , 可 以 看 到 上 面 图片 没 有 被 切割 , 并 分 成 4 份 在 四 角 


显示 。 


| 司 “Dr 书 源 K 和 vodev 国 -中 殷实 - Pp- 
|@ DERten\codeVmte.. x | 
遍 5- 下 , 人 ri30 重 


使 用 的 原始 图 片 如 下 


border-image 属性 规定 了 边框 的 图 片 - 


bq 人 
图 片 铺 滨 副 个 边框. 
bE 


图 片 被 拉 伸 以 填充 该 区 域 。 
一 加 


图 13-23 ”切割 大 小 大 于 图 片 大 小 
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13.5 ”综合 实例 一 一 设计 公司 主页 
打开 各 种 类 型 商业 网 站 ， 最 先 映 入 眼帘 的 就 是 首页 ， 也 称 为 主页 。 作 为 一 个 网 站 的 门户 ， 
主页 一 般 要 求 版 面 整洁 、 美 观 大 方 。 结 合 前 面 学 习 的 背景 和 边框 知识 ， 我 们 创建 一 个 简单 的 商 
业 网 站 。 具 体 步骤 如 下 ; 


[0 则 分 析 需 求 。 


在 本 实例 中 ， 主 页 包括 三 个 部 分 : 一 部 分 是 网 站 Logo; 一 部 分 是 导航 栏 ， 最 后 一 部 分 是 
主页 显示 内 容 。 网 站 logo 此 处 使 用 了 一 个 背景 图 来 代替 ,导航 栏 使 用 表格 实现 ， 内 容 列 表 使 用 
无 序列 表 实现 。 


02 构建 基本 HIML。 


为 了 划分 不 同 的 区 域 , HTML 页 面 需 要 包含 不 同 的 div 层 , 每 一 层 代 表 一 个 内 容 。 一 个 div 
包含 背景 图 ; 一 个 div 包含 导航 栏 ， 一 个 div 包含 整体 内 容 ， 内 容 又 可 以 划分 两 个 不 同 的 层 。 
基本 HTML 代码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<title> 公 司 主页 </title> 

</head> 

<body> 

<center> 

<div> 

<div class="divl" align=center></div> 

<div class=div2> 

<table width=99%><tr align=center><td> 首 页 </td><td> 最 新 消息 </td><td> 产 品 展 
示 </td><td> 销 售 网 络 </td><td> 人 才 招 聘 </td><td> 客 户 服务 </td></tr></table> 

</div> 

<div class=div3> 

<div class=div4> 

<ul> 最 新 消息 

<1i> 公 司 举 办 2019 人 金秋 篮球 比赛 </1i> 

<1i> 消 防 演练 大 比武 </1i> 

<1i> 优 秀 员工 评比 </1i> 

<1i> 公 司 发 布 招聘 信息 </1i> 

</ul> 

</div> 

<div class=div5> 

<ul> 客 户 案例 

<1i> 上 海 电 力 公司 </1i> 
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<1i> 浙 江 电力 公司 </1i> 
<1i> 辽 宁 电力 公司 </1i> 
<1i> 河 北 电 力 公司 </1i> 
</ul> 

</div> 

</div> 

</div> 

</center> 

</body> 

</html> 


在 正 11.0 中 浏览 效果 如 图 13-24 所 示 ， 可 以 看 到 在 网 页 中 显示 了 导航 栏 和 两 个 列表 信息 。 


国生 添加 CSS 代码， 设置 背景 Logo。 


<style> 

-divil{ 
height:100px; 
width:820px; 
background-image:url (main.jpg); 
background-repeat:no-repeat; 
background-position:center; 
background-size:cover;} 

</style> 


在 正 11.0 中 浏览 效果 如 图 13-25 所 示 , 可 以 看 到 在 网 页 顶部 显示 了 一 个 背景 图 , 此 背景 覆 
盖 整 个 div 层 ， 并 不 重复 ， 并 且 背 景 图 片 居中 显示 。 


- 0O x 2 
= [ 可 DA 书刊 KBvcodev 国 ” 叫 | 和 振 Dr 
( 名 “Di 本 书 源码 vode 间 国人 | 搜索 . | arm * 回 
大 公司 主页 x 六 HR 入 百 SV) 改 基 天 IR(T) D(H) 

文 作 (F) 编 加 (和) 查看 (V) 收藏 天 (A) 工具 (T) 帮助 (H) LE 
汉 百 诬 一 下 ， 你 8 和] 者 4 JR 下 

手下 位于 

首页 最 新 消息 ”产品 展示 “销售 网 络 人才 招聘 客户 服务 、 和 全 La 

最 新 消息 首页 产品 展示 铺 售 | 络 人才 向 聘 。 窑 记 服 务 
. 公司 举办 2019 人 金秋 篇 球 比 赛 
a 消防 演练 大 比武 
. 优秀 员工 评比 
公司 发 布 招聘 信息 
客户 案例 
。 上 海 电力 公司 
外 浙江 电力 公司 
s 辽宁 电力 公司 
。 河北 电力 公司 
< > 
图 13-24 基本 HTML 结构 图 13-25 ”设置 背景 图 


t@ 风 添加 CSS 代码 ,设置 导航 栏 。 


.div2{ 
width:820px; 
background-color:#d2e7ff; 
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} 
table{ 
font-size:20px; 
font-family:" 幼 圆 "; 
} 


在 正 11.0 中 浏览 效果 如 图 13-26 所 示 ， 可 以 看 到 在 网 页 中 导航 栏 背景 色 为 浅 蓝 色 ， 表 格 
中 字体 大 小 为 20 像素 ， 字 体 类 型 是 幼 圆 。 


L@ 辐 添加 CSS 代码 ， 设 置 内 容 样式 。 


-div3{ 
width:820px; 
height:320px; 
border-style:solid; 
border-color:#ffeedd; 
border-width:10px; 
border-radius:60px; 

|; 

-div41{ 
width:810px; 
height:150px; 
text-align:left; 
border-bottom-width: 2px; 
border-bottom-style:dotted; 
border-bottom-color:#ffeedd; 

} 

.div5{ 
width:810px; 
height:150px; 
text-align:left; 

于 


在 正 11.0 中 浏览 效果 如 图 13-27 所 示 , 可 以 看 到 在 网 页 中 内 容 显示 在 一 个 圆 角 边框 中 , 两 
个 不 同 的 内 容 块 中 间 使 用 虚线 隔 开 。 


ET] CE 万 - 中 
DcodeWi 图 已 信守 A |s cman > 
大 公司 主页 2 
hl) aD EV WEA) TAM Wr) 
请 3 一下， Gan 


ZR Sm Hav eA II me 
让 otmm 


销售 网 络 ”人才 招聘 客户 服务 


图 13-26 设置 导航 栏 图 13-27 CSS 修饰 边框 
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t@g 添加 CSS 代码 ， 设 置 列表 样式 。 
ulf{ 


font-size:20px; 
font-family: "楷体 "; 
} 


在 正 11.0 中 浏览 效果 如 图 13-28 所 示 ， 可 以 看 到 在 网 页 中 列表 字体 大 小 为 20 像素 ， 字 体 


类 型 为 楷体 。 
OT] EE 5 
公司 页 3 
文件 (有 ) 国 坦 (F) 可 看 (V) 收 醋 才 (A) 工具 (项 助 (H) 
将 下, favo 
销售 网 络 。 ”人 才 招 聘 。 客户 


图 13-28 美化 列表 信息 


13.6 专家 解 惑 


1. 我 的 背景 图 片 不 显示 ， 是 不 是 路 径 的 问题 呢 ? 
在 一 般 情况 下 ， 设 置 图 片 路 径 的 代码 如 下 : 
background-image:url (lo0go.jpg); 


background-image:url(../l10go0.jpg); 
background-image:url(../images/l0go.jpg); 


服务 


对 于 第 一 种 情况 “url(logo.jpg)”， 要 看 此 图 片 是 不 是 与 CSS 文件 在 同一 目录 。 


对 于 第 二 和 第 三 种 情况 ， 是 极力 不 推荐 使 用 的 ， 因 


为 网 页 文件 可 能 存在 于 多 级 目录 中 ， 不 


同 级 目录 的 文件 位 置 注定 了 相对 路 径 是 不 一 样 的。 而 这 样 就 让 问题 复杂 化 了 ， 很 可 能 图 片 在 这 


个 文件 中 显示 正常 ， 换 了 一 级 目标 ， 图 片 就 找 不 到 影子 了 。 


lE 立 一 个 公共 文件 目录 , 用 


有 一 种 方法 可 以 轻松 解决 这 一 问题 , 对 


"290。 


来 存放 一 些 公用 图 片 文件 ， 
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如 “image”， 将 图 片 文件 也 直接 存 于 该 目录 中 。 在 CSS 文件 中 ， 代 码 如 下 : 


url (images/10go.jpg) 

2. 用 小 图 片 进行 背景 平 铺 好 吗 ? 

不 要 使 用 过 小 的 图 片 做 背景 平 铺 。 这 是 因为 宽 高 1 像素 的 图 片 平 铺 出 一 个 宽 高 200 像素 的 
区 域 ， 需 要 200X200=40, 000 次 ， 占 用 资源 。 

3. 边框 样式 border:0 会 占用 资源 吗 ? 

推荐 的 写法 是 bordernone， 虽 然 border:0 只 是 定义 边框 宽度 为 零 ， 但 边框 样式 、 颜 色 还 是 
会 被 浏览 器 解析 ， 占 用 资源 。 


291 。 
J 


第 14 章 网 页 的 定位 与 布局 


网 页 设计 中 ， 能 否 很 好 地 定位 网 页 中 的 每 个 元 素 是 网 页 整体 布局 的 关键 。 一 个 布局 混乱 、 
元 素 定位 不 准 的 页 面 ， 是 每 个 浏览 者 都 不 喜欢 的 。 而 把 每 个 元 素 都 精确 定位 到 合理 位 置 ， 才 是 
构建 美观 大 方 页 面 的 前 提 。 


14.1 定位 方式 


在 CSS3 中 ， 定 位 可 以 将 一 个 元 素 精确 地 放 在 页 面 上 用 户 所 指定 的 位 置 ， 而 布局 是 将 整个 
页 面 的 元 素 内 容 整洁 且 完美 地 摆 放 。 定 位 的 实现 是 布局 成 功 的 前 提 。 如 果 清 晰 地 掌握 了 定位 原 
理 ， 那 么 就 能 够 创建 多 种 高 级 而 精确 的 布局 ， 并 会 让 网 页 更 加 完美 地 实现 。 


14.1.1 定位 属性 

在 网 页 设计 中 , 定位 (Positioning) 就 是 用 户 精 确 地 定义 HTML 元 素 框 所 在 页 面 中 的 位 置 ， 
可 以 是 页 面 绝对 位 置 ， 也 可 以 处 于 其 上 级 元 素 、 另 一 个 元 素 或 浏览 器 窗口 的 绝对 位 置 。 

可 以 将 每 个 元 素 都 认为 包含 在 一 个 矩形 框 内 ， 称 为 元 素 框 。 而 元 素 内 容 与 元 素 框 共同 形成 
了 元 素 块 。 所 谓 定位 ， 就 是 定位 元 素 块 位 置 和 大 小 。 实 现 CSS3 定位 ， 需 要 依赖 定位 属性 才能 
够 完成 。 

表 14-1 列 出 了 CSS3 中 全 部 有 关 的 定位 属性 。 


表 14-1 定位 属性 


定位 属性 含义 
指定 元 素 横向 距 右 部 距离 


指定 元 素 纵向 距 项 部 距离 


指定 元 素 纵向 距 底 部 距离 
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定位 属性 含义 

z-index 
设置 元 素 框 高 度 

内 容 溢出 控制 


Er 


表 中 前 6 个 属性 是 实际 的 定位 属性 ， 后 面 4 个 相关 属性 是 用 来 设置 元 素 框 ， 或 对 元 素 框 中 
的 内 容 进 行 控制 的 属性 。 其 中 ，position 属性 是 最 主要 的 定位 属性 ， 它 既 可 以 定义 元 素 框 的 绝 
对 位 置 ， 又 可 以 定义 相对 位 置 ， 而 left、right、top 和 bottom 只 在 position 属性 中 使 用 才 会 发 挥 
作用 。 


14.1.2 ”position 定位 


网 页 中 各 种 元 素 需 要 有 自己 合理 的 ， 从 而 搭建 整个 页 面 的 结构 。 在 CSS3 中 ， 可 以 通过 
position 这 个 属性 ， 对 页 面 中 元 素 进行 定位 。 

语法 格式 如 下 : 

position : static | absolute | fixed | relative 

其 参数 含义 如 表 14-2 所 示 。 


表 14-2 ”position 属性 参数 值 


参数 名 说 明 

static 元 素 定位 的 默认 值 ， 无 特殊 定位 ， 对 象 遵循 HTML 定位 规则 ， 不 能 通过 z-index 进 
行 层 次 分 级 

relative 相对 定位 ， 对 象 不 可 重 又 ， 可 以 通过 left、right、bottom 和 top 等 属性 在 正常 文档 中 
偏 移 位 置 ， 可 以 通过 z-index 进行 层次 分 级 

absolute 生成 绝对 定位 的 元 素 ， 相 对 于 static 定位 以 外 的 第 一 个 父 元 素 进行 定位 。 元 素 的 位 
置 通过 “left” “top” “right” 及 “bottom” 属 性 进行 规定 

fixed fixed 生成 绝对 定位 的 元 素 ， 相 对 于 浏览 器 窗口 进行 定位 。 元 素 的 位 置 通过 “left” 


“top”“right” 及 “bottom” 属 性 进行 规定 
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1. 绝对 定位 absolute 
绝对 定位 是 参照 浏览 器 的 左上 角 ， 配 合 ttp、left、bottom 和 right 进行 定位 的 ， 如 果 没 有 
设置 上 述 的 4 个 值 ， 则 默认 依据 父 hs 点 为 原始 点 的 。 绝 对 定位 可 以 通过 上 、 下 、 左 、 
右 来 设置 元 素 ， 使 之 处 在 任何 一 个 位 置 。 
在 父 层 position 属性 为 默认 值 时 ， 上 、 下 、 左 、 右 的 坐标 原点 以 body 的 坐标 原点 为 起 始 位 
置 。 绝 对 定位 的 语法 格式 如 下 : 


position:absolute 


只 要 将 上 面 代码 加 入 到 样式 中 ， 使 用 样式 的 元 素 就 可 以 以 绝对 定位 的 方式 显示 了 。 


【 例 14.1】〔 实 例文 件 : ch14\14.1.html) 

<!DOCTYPE html> 

<html> 

<head> 

<title> 定 位 属性 </title> 

</head> 

<body> 

<div style="background-color: Black; width:200px; height:200px"> 

<h2 style=" position:absolute; left:80px; top:80px; width:110px; 
height:50px;background-color:Red;"> 这 是 绝对 定位 </h2> 

</div> 

</body> 

</html> 


在 正 11.0 中 浏览 效果 如 图 14-1 所 示 ， 可 以 看 到 红色 元 素 框 依据 浏览 器 左上 角 为 原点 ， 坐 
标 位 置 为 〈80 像素 ，80 像素 ) ， 宽 度 为 110 像素 ， 高 度 为 50 像素 。 


一 口 X 
划 “D:\ 本 书 源 代 码 vcodevc 国 ”搜索 

千 定位 尾 性 

请 省 百度 一 下 ， 你 就 知道 


图 14-1 绝对 定位 


网 页 的 定位 与 布局 第 14 党 


使 用 绝对 定位 会 产生 一 个 问题 。 目 前 ， 大 多 数 的 网 页 都 是 居中 显示 的 ， 而 且 元 素 与 
ET 元 素 之 间 布 局 是 紧密 的 。 而 绝对 定位 的 开始 位 置 是 浏览 器 左上 角 的 0 点 ， 当 设置 各 


元 素 块 边 偏 移 属性 时 ， 由 于 客户 端 屏 幕 分 状 率 的 不 同 ， 各 元 素 块 的 显示 可 能 会 有 偏 
差 。 这 是 由 于 页 面 的 显示 是 随 着 分 辨 率 的 大 小 而 自动 适应 ， 而 各 元 素 块 在 参照 绝对 
定位 的 位 置 显 示 ， 那 么 在 浏览 器 的 视野 范围 内 原始 页 面 可 以 或 超出 或 缩小 的 显示 。 


优秀 的 页 面 设 计 是 能 够 适用 各 种 屏幕 分 辨 率 , 并 且 能 够 保证 正常 显示 的 。 要 解决 这 个 问题 ， 
在 定位 时 最 好 使 用 相对 定位 。 

2. 相对 定位 relative 

如 果 对 一 个 元 素 进行 相对 定位 ， 首 先 它 将 出 现在 它 所 在 的 位 置 上 ， 然 后 通过 设置 垂直 或 水 
平 位 置 ， 让 这 个 元 素 “ 相 对 于 ” 它 的 原始 起 点 进行 移动 。 再 一 点 ， 相 对 定位 时 ， 无 论 是 否 进行 
移动 ， 元 素 仍然 占据 原来 的 空间 。 因 此 ， 移 动 元 素 会 导致 它 覆盖 其 他 框 。 

绝对 定位 与 相对 定位 的 区 别 在 于 : 绝对 定位 的 坐标 原点 为 上 级 元 素 的 原点 ， 与 上 级 元 素 有 
关 ; 相对 定位 的 坐标 原点 为 本 身 偏 移 前 的 原点 ， 与 上 级 元 素 无 关 。 

相对 定位 的 语法 格式 如 下 : 


position:relative 


【 例 14.2】 《实例 文件 ，ch14\14.2.html) 


<!DOCTYPE html> 

<html> 

<head> 

<style type="text/css"> 

h2.pos left 

{ 

position:relative; 

left:-20px 

| 

h2.pos right 

{ 

position:relative; 

left:20px 

} 

</style> 

</head> 

<body> 

<h2> 这 是 位 于 正常 位 置 的 标题 </h2> 

<h2 class="pos left"> 这 个 标题 相对 于 其 正常 位 置 向 左 移动 </h2> 
<h2 class="pos right"> 这 个 标题 相对 于 其 正常 位 置 向 右 移 动 </h2> 
<p> 相 对 定位 会 按照 元 素 的 原始 位 置 对 该 元 素 进行 移动 。</p> 

<p> 样 式 "left:-20px” 从 元 素 的 原始 左 侧 位 置 减 去 20 像素 。</p> 
<p> 样 式 "left:20px” 向 元 素 的 原始 左 侧 位 置 增加 20 像素 。</p> 
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</body> 
</html> 


在 正 11.0 中 浏览 效果 如 图 14-2 所 示 ， 可 以 看 到 页 面 显示 了 3 个 标题 ， 最 上 面 标题 正常 显 
示 ， 下 面 两 个 标题 分 别 以 正 长 标题 为 原点 ， 向 左 或 向 右 分 别 移动 了 20 像素 。 


I 全 DVRRRodev 国 -并 - Tp 
| owtmremvcodevents.. x 
| 高 3 Go 

这 是 位 于 正常 位 置 的 标题 名 
这 个 标题 相对 于 其 正常 位 置 向 左 移动 
这 个 标题 相对 于 其 正常 位 置 向 右 移动 


x > 


图 14-2 ”相对 定位 


3. 固定 定位 fxed 

固定 定位 和 绝对 定位 比较 相似 ， 它 是 绝对 定位 的 一 种 特殊 形式 ， 固 定 定位 的 容器 不 会 随 着 
滚动 条 的 拖 动 而 变化 位 置 。 在 视线 中 ， 固 定 定位 的 容器 位 置 是 不 会 改变 的 。 固 定 定位 可 以 把 一 
些 特殊 效果 固定 在 浏览 器 的 视线 位 置 。 

由 于 固定 定位 的 参照 位 置 不 是 上 级 元 素 块 而 是 浏览 器 窗口 , 所 以 可 以 使 用 固定 定位 来 设置 
类 似 传统 框架 样式 布局 ， 以 及 广告 框架 或 导航 框架 等 。 使 用 固定 定位 的 元 素 可 以 脱离 页 面 ， 无 
论 页面 如 何 滚动 ， 始 终 处 在 页 面 的 同一 位 置 上 。 

固定 定位 语法 格式 如 下 : 


position:fixed 


【 例 14.3】〔 实 例文 件 : ch14\14.3.html) 


<!DOCTYPE html> 

<html> 

<head> 
<title>CSS 固 定 定位 </title> 
<style type="text/css">... 
el 

padding:0; 

margin:0; 

} 

#fixedLayer { 
width:100px; 
line-height:50px; 


200, 
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background: #FC6; 
border:lpx solid #F90; 
position:fixed; 
left:10px; 

top: 10px> 

} 

</style> 

</head> 

<body> 

<div id="fixedLayer"> 固 定 不 动 </div> 
<p> 我 动 了 </p> 

<p> 我 动 了 </p> 

<p> 我 动 了 </p> 

<p> 我 动 了 </p> 

<p> 我 动 了 </p> 

<p> 我 动 了 </p> 

<p> 我 动 了 </p> 

<p> 我 动 了 </p> 

<p> 我 动 了 </p> 

<p> 我 动 了 </p> 

<p> 我 动 了 </p> 

<p> 我 动 了 </p> 
</body> 

</html> 


在 下 11.0 中 浏览 效果 如 图 14-3 所 示 ， 可 以 看 到 拖 动 滚动 条 时 ， 无 论 页 面 内 容 怎么 变化 ， 
其 黄色 框 “ 固 定 不 动 ”始终 处 在 页 面 左 上 角 顶 部 。 


基 ”D:\ 本 书 源 代码 \code\c 图 ”搜索 .… 内- 
大 “CSS 固定 定位 x 四 
育 全 百度 一 下 ， 你 8 知道 


Wd| : 
我 动 了 
我 动 了 
我 动 了 
我 动 了 
我 动 了 
我 动 了 
我 动 了 
图 14-3 固定 定位 
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14.1.3” 层 又 顺序 


Z-index 


对 HTML 元 素 进行 定位 时 ， 可 以 从 其 高 度 、 宽 度 和 深度 3 个 方面 入 手 ， 高 度 使 用 height、 
宽度 使 用 width、 深 度 使 用 z-index。z-index 用 来 设置 元 素 层 县 的 次 序 ， 其 方法 是 每 个 元 素 指 定 


一 个 数字 ， 数 字 较 大 


的 元 素 将 县 加 在 数字 较 小 的 元 素 之 上 。 


z-index 语法 格式 如 下 : 


z-index : auto | number 


其 参数 值 auto 表示 遵循 父 对 象 的 定位 ，number 是 一 个 无 单位 的 整数 值 ， 可 以 为 负 值 。 如 
果 两 个 决定 定位 元 素 的 z-index 属性 具有 相同 的 number 值 ， 则 依据 该 元 素 在 HTML 文档 中 声 
明 的 顺序 进行 层 又 。 如 果 绝 对 定位 的 元 素 没有 指定 z-index 属性 ， 则 此 属性 的 number 值 为 正 数 
的 元 素 会 登 加 在 该 元 素 之 上 , 而 number 值 为 负数 的 对 象 在 该 元 素 之 下 。 如 果 将 参数 设置 为 null， 
则 可 以 消除 此 属性 。 该 属性 只 作用 于 position 的 属性 值 为 relative 或 absolute 的 对 象 ， 不 能 作用 


在 窗口 组 件 上 。 


【 例 14.4】〔 实 例文 件 :ch14\14.4.html) 
<!DOCTYPE html> 


<html> 
<head> 


<title>Zz-index 使 用 </title> 


<style> 

#big { 
width:800px; 
height:220px; 
padding:6px; 


background-color:#999999; 
position:relative; 


} 

#Div1 { 
width:160px; 
height:80px; 


background-color:#FFD700; 


padding:6px; 


position:absolute; 


Left:9px: 
top: 9px; 
z-index:6; 

| 

#Div2 { 
width:120px; 
height:80px; 


background-color:thistle; 
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padding:6px; 

position:absolute; 

left:280px; 

top: 90px; 

z-index:4; 

} 

#Div3 { 

width:140px; 

height:80px; 

background-color:lightskyblue; 

padding:6px; 

position:absolute; 

left:150px; 

Op :25pxs 

z-index:5; 

} 

</style> 

</head> 

<body> 

<div id="big"> 

<div id="Divl"><br /> 
z-index 值 是 6 ; </div> 

<div id="Div2"><br /> 
z-index 值 是 4 ; </div> 

<div id="Div3"><br /> 
z-index 值 是 5 ; </div> 

</div> 

</body> 

</html> 


在 正 11.0 中 浏览 效果 如 图 14-4 所 示 ， 可 以 看 到 网 页 中 显示 了 3 个 层 ，3 个 层 中 数值 大 小 
不 同 ， 并 从 大 到 小 分 别 在 别 的 层 上 显示 。 
本 D 本 忆 漂 fcodevh1, 国 了 || Bs.. Dp:| 介 六 名 @ 


局 zindex 使 用 “加 
请 当下 一下, 人 0 道 


图 14-4 z-index 效果 显示 
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14.1.4 边 偏 移 属性 


边 偏 移 属性 包含 left、right、top 和 bottom。 所 谓 边 偏 移 属性 ， 就 是 用 来 描述 元 素 块 与 包含 
元 素 块 最 近 的 边线 之 间 的 偏 移 量 的 属性 。 其 中 left 描述 元 素 块 最 左边 与 包含 其 边框 最 左边 的 边 
线 的 距离 ， 如 果 left 属性 值 为 正 ， 则 会 偏 右 移 ， 如 果 为 负 ; 则 会 使 它 更 向 左 移 ， 甚 至 移出 边线 ， 
其 他 依次 类 推 。 

left、right、top 和 bottom4 个 属性 取 值 非常 相似 ， 这 里 以 left 为 例 进行 介绍 。left 语法 格式 
如 下 : 


left : auto | length 


上 面 参数 值 中 auto 表示 系统 自动 取 值 ; length 表示 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 
或 百分数 。 直 接 设置 数值 用 来 设置 元 素 的 绝对 位 置 ， 一旦 该 位 置 确定 ， 该 元 素 将 始终 处 于 页 面 
中 的 该 位 置 。 使 用 百分比 设置 元 素 位 置 ， 是 相对 于 其 上 级 元 素 的 位 置 而 设置 的 。 如 果 取 值 为 
auto， 则 在 定位 中 允许 元 素 刚好 有 显示 其 内 容 所 需 的 宽度 及 高 度 ， 而 不 必 再 指明 宽度 及 高 度 的 
值 了 。 


【 例 14.5】 实例 文件 : ch14\14.5.html) 

<!DOCTYPE html> 

<html> 

<head> 

<title> 定 位 属性 </title> 

</head> 

<body> 

<div style="background-color: Black; width:200px; height:200px"> 
<p style=" position:relative; left:50%; right:0; top:50%; bottom:0; 

width:100px; height:100px; 

background-color:Red;"> 边 偏 移 </p> 

</div> 

</body> 

</html> 


在 正 11.0 中 浏览 效果 如 图 14-5 所 示 ， 可 以 看 到 黄色 正方 形 框 在 指定 位 置 显示 ， 其 底 侧 和 
右 侧 分 别 与 大 的 矩形 框 对 应 。 
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一 口 x 
@ 知 ”D:\ 本 书 源 代码 \code\c 国 ~ 搜索.…. 
碟 定位 尾 性 


次 委 百度 一 下 ， 你 就 知道 


图 14-5 边 偏 移 效果 显示 


14.2 float 浮动 定位 
除了 使 用 position 进行 定位 外 ， 还 可 以 使 用 float 定位 。float 定位 只 能 在 水 平方 向 上 定位 ， 
而 不 能 在 垂直 方式 上 定位 。float 属性 表示 浮动 属性 ， 它 用 来 改变 元 素 块 的 显示 方式 。 
float 语法 格式 如 下 : 
float : none | left |right 
其 属性 值 如 表 14-3 所 示 。 


表 14-3 float 属性 值 


属性 值 说 明 


元 素 不 


实际 上 ， 使 用 float 可 以 实现 两 列 布局 ， 也 就 是 让 一 个 元 素 在 左 浮动 ， 一 个 元 素 在 右 浮动 ， 
并 控制 好 这 两 个 元 素 的 宽带 。 


【 例 14.6】〔 实 例文 件 ，ch14\14.6.html) 


<!DOCTYPE html> 

<html> 

<head> 
<title>float 定 位 </title> 
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<style> 

er 

padding:0px; 

margin:0px; 

; 

big 1 

width:600px; 

height:100px; 

margin:0 auto 0 auto; 

border:#332533 lpx solid; 

} 

.one { 

width:300px; 

height:20px; 

float:left; 

border:#996600 lpx solid; 

} 

< 本 WO 并 

width:290px; 

height:20px; 

float:right; 

margin-left:S5px; 

display:inline; 

border:#FF3300 lpx solid; 

} 

</style> 

</head> 

<body> 

<div class="big"> 
<DIV class="one"> 
<p> 非 诚 勿 扰 </p> 
</DIV> 
<DIV class="two"> 
<p> 中 国 达 人 秀 </p> 
</DIV> 

</div> 

</body> 

</html> 


在 下 11.0 中 浏览 效果 如 图 14-6 所 示 ， 可 以 看 到 显示 了 一 个 大 矩形 框 ， 大 和 矩形 框 中 存在 两 
个 小 的 矩形 框 ， 并 且 并 列 显示 。 
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图 14-6 ”float 浮动 布局 


使 用 float 属性 不 但 改变 元 素 的 显示 位 置 ， 而 且 会 对 相 邻 内 容 造成 影响 。 定 义 了 float 属性 
的 元 素 会 覆盖 在 其 他 元 素 上 ， 而 被 覆盖 的 区 域 将 处 于 不 可 见 状态 。 使 用 该 属性 能 够 实现 内 容 环 
绕 图 片 的 效果 。 

如 果 不 想 让 float 下 面 的 其 他 元 素 浮动 环绕 在 该 元 素 周围 ， 就 可 以 使 用 CSS3 中 的 clear 属 
性 ， 清 除 这 些 浮动 元 素 。 


clear 语法 格式 如 下 : 


clear : none | left |right | both 

其 中 ，none 表示 人 允许 两 边 都 可 以 有 浮动 对 象 ，both 表示 不 允许 有 浮动 对 象 ，left 表示 不 多 
许 左 边 有 浮动 对 象 ，right 表示 不 允许 右边 有 浮动 对 象 。 使 用 float 以 后 ， 在 必要 的 时 候 就 需要 
通过 clear 语句 清除 float 带 来 的 影响 ， 以 免 出 现 “其 他 DIV 跟着 浮动 ”的 效果 。 


14.3 overflow 溢出 定位 


如 果 元 素 框 被 指定 了 大 小 ， 而 元 素 的 内 容 不 适合 该 大 小 ， 例 如 元 素 内 容 较 多 ， 元 素 框 显示 
不 小 ， 此 时 则 可 以 使 用 溢出 属性 overflow 来 控制 这 种 情况 。 
overflow 语法 格式 如 下 : 


overflow : visible | auto | hidden | scroll 
各 属性 值 及 其 说 明 如 表 14-4 所 示 。 


表 14-4 overflow 属性 值 


属性 值 说 明 
若 内 容 溢出 ， 则 溢出 内 容 可 见 
若 内 容 溢 出 ， 则 溢出 内 容 隐藏 


保持 元 素 框 大 小 ， 在 框 内 应 用 滚动 条 显示 内 容 


等 同 于 scroll， 它 表示 在 需要 时 应 用 滚动 条 
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overflow 属性 适用 于 以 下 情况 。 


(1) 当 元 素 有 负 边 界 时 。 

(2) 元 素 框 宽 于 上 级 元 素 内容 区 ， 换 行 不 被 允许 。 
(3) 元 素 框 宽 于 上 级 元 素 区 域 宽度 。 

(4) 元 素 框 高 于 上 级 元 素 区 域 高 度 。 

(5) 元 素 定义 了 绝对 定位 。 


【 例 14.7】〔 实 例文 件 : ch14\14.7.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title>overflow 属 性 </title> 

<style > 

divt{ 

position:absolute; 

color:#445633; 

height:200px; 

width: 30%; 

float:left; 

margin: Opx; 

padding: Opx; 

border-right: 2px dotted #cccccc; 
border-bottom: 2px solid #cccccc; 
padding-right: 10px; 

overflow:auto; 

} 

</style> 

</head> 

<body > 

<div> 

<p> 综 艺 节 目 排名 </p><p>1 非诚勿扰 </p><p>2 康 申 来 </p> 
<p>3 ”快乐 大 本 营 </p><p>4 ”娱乐 大 风暴 </p><p>5 天 天 向 上 </p><p>6 爱情 连连 看 </p> 
<p>7 销 销 三 人 行 </p><p>8 我 们 约会 吧 </p> 
</div> 

</body> 

</html> 


在 下 11.0 中 浏览 效果 如 图 14-7 所 示 ， 可 以 看 到 在 一 个 元 素 框 中 显示 了 多 个 元 素 ， 拖 动 显 
示 的 滚动 条 可 以 查看 全 部 元 素 。 如 果 overflow 设置 的 值 为 hidden， 则 会 隐藏 多 余 元 素 。 
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= 口 x 
司 “Dx 证 书 源 人 ENcodevc 国 ” 仿 搜 索 .… 
筷 overflow 层 性 x | 
雇 总 百 E- 下 , 全 


综艺 节目 排名 A 
1 非诚勿扰 
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图 14-7 溢出 定位 


14.4 visibility 隐藏 定位 
visibility 属性 指定 是 否 显示 一 个 元 素 生成 的 元 素 框 。 这 意味 着 元 素 仍 占据 其 本 来 的 空间 ， 
不 过 可 以 完全 不 可 见 ， 即 设置 元 素 的 可 见 性 。 
visibility 语法 格式 如 下 : 
visibility : inherit | visible | collapse | hidden 
其 属性 值 如 表 14-5 所 示 。 
表 14-5 visibility 属性 值 


collapse 要 用 来 隐藏 表格 的 行 或 列 。 隐 藏 的 行 或 列 能 够 被 其 他 内 容 使 用 。 对 于 表格 外 的 其 他 对 象 ， 
日 等 同 于 hidden 。 


如 果 元 素 visibility 属性 的 属性 值 设 置 为 hidden， 则 表现 为 元 素 隐藏 ， 即 不 可 见 。 但 是 ,元 
素 不 可 见 ， 并 不 等 同 于 元 素 不 存在 ， 它 仍旧 会 占有 部 分 页 面 位 置 ， 影 响 页 面 的 布局 ， 就 如 同 可 
见 一 样 。 换 名 话说， 元 素 仍然 处 于 页 面 中 的 位 置 上 ， 只 是 无 法 看 到 它 而 已 。 


【 例 14.8】〔 实 例文 件 ，ch14\14.8.html) 
<!DOCTYPE html> 

<html> 

<head> 

<title>float 属 性 </title> 

<style type="text/css"> 
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-div{ 
padding:5px; 
加 src 
float:left; 
padding:20px; 
visibility:visible; 
} 
hi{ 
font-weight:bold; 
text-align:center 
} 
</style> 
</head> 
<body> 
<h1> 插 花 </h1> 
<div class="div"> 
<div class="pic"> 
<img src="08.jpg" width=150px height=100px /></div> 
<p> 插 花 就 是 把 花 插 在 瓶 、 盘 、 盆 等 容器 里 ， 而 不 是 栽 在 这 些 容器 中 。 所 插 的 花 材 ， 枝 、 花 、 叶 
均 不 带 根 ， 只 是 植物 体 上 的 一 部 分 ， 并 且 不 是 随便 乱 插 的 ， 而 是 根据 一 定 的 构思 来 选材 ， 遵 循 一 定 的 创 
作法 则 ， 插 成 一 个 优美 的 形体 〈 造 型 ) ， 借 此 表达 一 种 主题 ， 传 递 一 种 感情 和 情趣 ， 使 人 赏心悦目 ， 获 
得 精神 上 的 美感 和 愉快 。</p> 
<p> 在 我 国 插花 的 历史 源远流长 ， 发 展 至 今 已 为 人 们 日 常生 活 所 不 可 缺少 。 一 件 成 功 的 插花 作 
品 ， 并 不 一 定 要 选用 名 贵 的 花 材 、 高 价 的 花 器 。 一 般 看 来 并 不 起 眼 的 绿叶 、 一 个 花蕾 ， 甚 至 路 边 的 
野花 野草 ， 常 见 的 水 果 、 蔬 菜 等 ， 都 能 插 出 一 件 令 人 赏心悦目 的 优秀 作品 来 。 使 观赏 者 在 心灵 上 产 
生 共 鸣 是 创作 者 唯一 的 目的 ， 如 果 不 能 产生 共鸣 ， 那 么 这 件 作 品 就 失去 了 观赏 价值 。 有 具体 地 说 ， 播 
花 作 品 在 视觉 上 首先 要 立即 引起 一 种 感 观 和 情感 上 的 自然 反应 ， 如 果 未 能 立刻 产生 反应 ， 那 么 摆 在 
眼前 的 这 些 花 材 将 无 法 吸引 观 者 的 目光 。 在 插花 作品 中 引起 观赏 者 情感 产生 反应 的 要 素 有 三 点 : 一 
是 创意 〈 立 意 ) ， 指 的 是 表达 什么 主题 ， 应 选 什么 花 材 ， 二 是 构思 构图) ， 指 的 是 这 些 花 材 怎样 
巧妙 配置 造型 ， 在 作品 中 充分 展现 出 各 自 的 美 ; 三 是 插 器 ， 指 的 是 与 创意 相配 合 的 插花 器 血 。 三 者 
有 机 配合 ， 作 品 便 会 给 入 以 美的 享受 。</p> 
</div> 
</body> 
</html> 


在 正 11.0 中 浏览 效果 如 图 14-8 所 示 。 可 以 看 到 图 片 在 左边 显示 ， 并 被 文本 信息 所 环绕 。 
此 时 visibility 属性 为 visible， 表 示 图 片 可 以 看 见 。 
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插花 


图 14-8 ”隐藏 定位 显示 


14.5 ” 块 和 行内 元 素 display 


在 网 页 设计 中 ， 根 据 需 要 可 以 将 段落 设置 成 一 个 块 显示 ， 并 带 有 边框 ， 即 类 似 于 div 层 的 
效果 ， 也 可 以 把 多 个 HTML 元 素 放 在 同一 行 显示 。 本 节 将 介绍 这 两 种 实现 方式 。 


14.5.1 块 元 素 
在 CSS3 中 可 以 通过 display 属性 控制 元 素 显 示 ， 即 元 素 显示 方式 。 
display 语法 格式 如 下 : 
display : block | none | inline | compact | marker | inline-table | list-item 


| run-in | table Itable-caption | table-cell | table-column | table-column-group 
| table-footer-group | table-header-group | table-row | table-row-group 


其 属性 值 如 表 14-6 所 示 。 
表 14-6 display 属性 
rr 


CSS2 分 配对 象 为 块 对 象 或 基于 内 容 之 上 的 内 轴 
marker CSS2 指定 内 容 在 容器 对 象 之 前 或 之 后 。 要 使 用 此 参数 , 对 象 必须 与 :after 及 :before 

伪 元 素 一 起 使 
inline-table CSS2 将 表格 显示 为 无 前 后 换行 的 内 联 对 象 或 
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象 作为 块 元 素 级 的 表格 显示 
象 作 为 表格 标题 显示 
象 作 为 表格 单元 格 显示 


象 作为 表格 列 显示 

象 作为 表格 列 组 显示 
象 作为 表格 标题 组 显示 
象 作为 表格 脚注 组 显示 
象 作为 表格 行 显示 
table-row-group CSS2 将 对 象 作为 表格 行 组 显示 


display 属性 的 默认 值 为 block， 即 元 素 的 默认 显示 方式 是 以 块 元 素 方式 显示 。 常 用 的 段落 
p、 标 题 hl、 表 单 form、 列 表 ul 和 列表 选项 1 都 可 以 定义 成 块 元 素 。 一 个 块 元 素 ， 其 行 高 、 顶 
部 和 底部 都 是 可 控制 的 。 如 果 不 设 置 宽度 ， 块 就 会 默认 为 整个 容器 的 100%; 如 果 设 置 了 值 ， 
显示 大 小 就 由 值 决定 。 


【 例 14.9】〔 实 例文 件 : ch14\14.9.html) 
<!DOCTYPE html> 

<html> 

<head> 

<title> 块 元 素 </title> 

<style> 

abBigt 

width:800px; 

height:105px; 
background-image:url (07.jpg); 
BE 

af 

font-size:12px; 
display:block; 

width:100px; 

height:20px; 
line-height:20px; 
background-color:#F4FAFB; 
text-align:center; 
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text-decoration:none; 
border-bottom:1lpx dotted #6666FF; 
color:black; 

1 

a:hovert{ 
font-size:13px; 
display:block; 
width:100px; 
height:20px; 
line-height:20px; 
text-align:center; 
text-decoration:none; 
color:green; 

} 

</style> 

</head> 

<body> 

<div class="big"> 
<p> 


<a href="#"> 管 理应 用 </a><a href="#"> 财 务 管理 </a><a href="#"> 在 线 管理 </a> 


<a href="#"> 客 户 关系 管理 </a><a href="#"> 一 体 化 管理 </a> 
</p> 

</div> 

</body> 

</html> 


在 正 11.0 中 浏览 效果 如 图 14-9 所 示 ， 可 以 看 到 左边 显示 了 一 个 导航 栏 ， 右 边 显示 了 一 张 


图 片 。 其 导航 栏 就 是 以 块 元 素 形式 显示 。 


闻 ”DA\ 态 书 源 代码 wodevch14\14.9 html 多 -0 搜 过 
区 其 元 素 x | 
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图 14-9 块 元 素 显示 


14.5.2 ”行内 元 素 


当 display 的 值 被 设置 为 inline 时 , 可 以 把 元 素 设置 为 行内 元 素 , 并 在 浏览 器 中 同一 行 显示 。 
inline 元 素 决定 与 其 他 HTML 元 素 在 同一 行 上 ， 其 行 高 、 顶 部 和 底部 边 距 可 以 改变 ， 而 宽度 是 


不 可 以 改变 的 。 
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【 例 14.10】“《〈 实 例文 件 : chl4\14.10.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 行 内 元 素 </title> 

<style type="text/css"> 

-hang { 

display:inline; // 使 段落 生出 行内 框 

} 

</style> 

</head> 

<body> 

<div> 

<a href="#"” class="hang"> 这 是 a 标签 </a> 
<span class="hang"> 这 是 span 标 签 </ span> 
<strong class="hang"> 这 是 strong 标 签 </strong> 
<img class="hang" src=6.jpg/> 
</div> 

</body> 

</html> 


在 正 11.0 中 浏览 效果 如 图 14-10 所 示 , 可 以 看 到 页 面 显示 44 个 HTML 元 素 , 都 在 同一 行 
显示 ， 包 括 超级 链接 、 文 本 信息 和 图 片 。 


一 口 x 
闫 ”D:\ 本 书 源 代码 \code\c 图 ~ 搜索.… 

氏 行内 元 素 x | 

间 各 百度 一 下 ,你 就 知道 


这 是 a 标签 这 是 span 标 签 这 是 strong 标 签 图 


图 14-10 行内 显示 


14.6 ”综合 实例 一 一 定位 布局 新 闻 


一 个 美观 大 方 的 页 面 ， 必 然 是 一 个 布局 合理 的 页 面 。 左右 布局 是 网 页 中 比较 常见 的 一 种 方 
式 ， 即 根据 信息 种 类 不 同 将 信息 分 别 在 当前 页 面 左右 侧 显 示 。 本 实例 将 利用 前 面 学 习 的 知识 创 
建 一 个 左右 布局 的 新 闻 页 面 。 

具体 步骤 如 下 : 


1@ 国 分 析 需 求 。 
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首先 需要 将 整个 页 面 分 为 左右 两 个 模块 : 左 模块 放置 一 类 信息 ; 右 模块 放置 一 类 信息 ， 可 
以 设置 其 宽度 和 高 度 。 


L@ 到 创建 HTML 页 面 ， 实 现 基本 列表 。 


创建 HTML 页 面 , 同时 用 DIV 在 页 面 中 划分 左边 div 层 和 右边 div 层 两 个 区 域 , 并 且 将 信 
息 放 入 到 相应 的 div 层 中 ， 注 意 div 层 内 引用 CSS 样式 名 称 。 


<!DOCTYPE html> 

<html> 

<head> 

<title> 布 局 </title> 

</head> 

<body> 

<center> 

<div class="big"> 
<p class=pp> 女 人 </p> 

<div class="left"> 
<h1> 女 人 </h1> 
<p> 。 男 人 幸福 告白 : 女人 的 性 感 与 年 龄 成 正比 09:59 </p> 
<p> 。 六 类 食物 能 有 效 对 抗 紫外 线 11:15 </p> 
<p> 。 打 造 夏美 人 受 oL 追 捧 的 清爽 发 型 10:05 </p> 
<p> “美丽 帮 帮 忙 : 别 让 大 油 脸 吓 跑 男 人 09:47 </p> 
<p> “简约 雪 纺 清凉 衫 百 元 搭 出 欧美 范 儿 14:51 </p> 
<p> 。 花 边 连 衣 裙 超 勾 人 7 月 穿 搭 出 新 意 11:04 </p> 

</div> 

<div class="right"> 
<h1> 健 康 </h1> 
<p> 。 女 性 养生 : 让 女人 老 得 快 的 10 个 原因 19:18 </p> 
<p> “养生 盘点 : 喝 豆 浆 的 九 大 好 处 和 七 大 禁忌 09:14</p> 
<p> 。 养 生 和 警惕 :14 个 护肤 心理 “ 错 ” 觉 19:57</p> 
<p> 。 柿 子 番茄 骨 汤 8 种 营养 师 最 爱 的 食物 15:16</p> 
<p> 。 夏 季 养 生 指南 : “夫妻 菜 ” 宣 常 吃 10: 48 </p> 
<p> 。10 条 食疗 养生 方法 ， 居 家 宅 人 的 养生 经 13:54 </p> 

</div> 

</div> 

</center> 

</body> 

</html> 


在 正 11.0 中 浏览 效果 如 图 14-11 所 示 ， 可 以 看 到 页 面 显示 了 两 个 模块 ， 分 别 是 “女人 ” 
和 “健康 ”， 二 者 上 下 排列 。 


1@ 到 添加 CSS 代码， 修饰 整 体 样式 和 div 层 。 


<style> 
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| 
padding:0px; 
margin:0px; 
} 
body { 
Eont:m" 宋 体 " 
font-size:12px; 
} 
-bigf 
width:570px; 
height:210px; 
border:#C1C4CD lpx solid; 
</style> 


在 正 11.0 中 浏览 效果 如 图 14-12 所 示 ， 可 以 看 到 页 面 比较 原来 字体 变 小 ， 并 且 大 的 DIV 
显示 了 边框 。 


女人 去 人 


“男人 幸福 告白 : 女人 的 性 感 与 年 龄 成 正比 09:59 
， 六 类 食物 能 有 效 对 抗 紫 外 线 11:15 
“ 打造 夏美 人 受 0L 追 捧 的 清 殉 发 型 10:05 
"美丽 帮 帮 忙 : 别 让 大 油 脸 吓 跑 男人 09:47 
“" 简约 雪 纺 清凉 衫 百 元 搭 出 欧美 范 儿 14:51 
， 花边 连衣裙 超 杀 人 7 月 罕 搭 出 新 意 11:04 


外 机 
“机 委 人 要 pti 和 的 清 认 
大 肖 和 有 


i .女性 养生 让 女人 者 得 快 的 10 个 原因 19:18 
as ttt . 莽 生 全 点 : 唱 豆 光 的 九 大 好 处 和 七 大 村 忆 09.14 


“养生 警惕 ; 人 “ 错 ” 觉 19:57 


天 革 情 ，19 人 全 已 理 “| 
10 订 食疗 天 生 方法 ， 居家 宅 人 的 养生 经 13:54 


图 14-11 上 下 排列 图 14-12 ”修饰 整体 样式 


L 鸭 添加 CSS 代码 ， 设 置 两 个 层 左右 并 列 显 示 。 


.left{ 
width:280px; 
float:right; // 设 置 右边 悬浮 
border:#C1C4CD lpx solid; 
}.right{ 
width:280px; 
float:1left;// 设 置 左边 悬浮 
margin-left:6px; 
border:#C1C4CD lpx solid; 
} 


在 正 11.0 中 浏览 效果 如 图 14-13 所 示 ， 可 以 看 到 页 面 中 文本 信息 左右 并 列 显示 ， 但 字体 
没有 发 生变 化 。 


国名 添加 CSS 代码 ， 定 义 文本 样式 。 
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hl{ 
font-size:14px; 
padding-left:10px; 
background-color:#CCCCCC; 
height:20px; 
line-height:20px; 
} 
Pi 
margin:5px; 
line-height:18px; 
Color:#2F17CD; 
} 
-pp{ 
width:570px; 
text-align:left; 
height:20px; 
background-color:D5E7FD; 
position:relative; 
Left:—3pxs? 
Op?=3pX> 
font-size:16px; 
text-decoration:underline; 


} 


在 正 11.0 中 浏览 效果 如 图 14-14 所 示 , 可 以 看 到 页 面 中 文本 信息 左右 并 列 显 示 , 其 字体 颜 
色 为 蓝 色 ， 行 高 为 18 像素 。 


雪人 
“* 男人 幸福 此 白 ; 女人 的 性 感 与 年 龄 成 正比 09:59 。 女 性 养生 ; 让 女人 老 得 快 的 10 个 原因 19:18 
"六 类 食物 能 有 效 对 抗 紫外 线 11:15 “养生 盘点 ; 喝 豆浆 的 九 大 好 处 和 七 大 禁忌 09:14 
"打造 夏美 人 受 0L 扎 掉 的 清 责 发 型 10:05 “养生 警惕 ; 14 个 护肤 心理 “ 模 ” 沉 19:57 
"美丽 帮 帮 忙 : 别 让 大 油 脸 吓 跑 男人 09:47 “ 顶 子 番 驹 骨 疡 8 种 营养 师 景 爱 的 食物 15; 16 
， 简 约 雪 纺 清凉 衫 百 元 搭 出 欧美 范 儿 14:51 “* 夏季 养生 指南 : “夫妻 菜 ” 宜 常 吃 10:46 
“ 花 过 连衣裙 超 外 人 7 月 罕 搭 出 新 意 11:04 "10 条 食疗 养生 方法 ， 拓 家 宅 人 的 养生 经 13:54 
图 14-13 设置 左右 悬浮 
女人 
女人 健康 
"男人 幸福 肖 白 ; 女人 的 性 感 与 年 龄 成 正比 09:59 "女性 养生 : 让 女人 老 得 快 的 10 个 原因 19:18 
“" 六 类 食物 能 有 效 对 抗 紫外 战 11:15 “ 养生 盘点 : 唱 豆 桨 的 九 大 好 处 和 七 大 禁忌 09:14 
“" 打造 夏美 人 受 0L 追 排 的 清 庄 发 型 10:05 “养生 警惕 : 14 个 护肤 心理 “ 模 ” 觉 19:57 
“美丽 必用 忙 : 别 让 大 油 脸 吓 跑 男人 09: 47 “柿子 番 匣 骨 汤 8 种 营养 师 最 爱 的 食物 15:16 
“ 简约 委 六 清 凉 衫 百 元 搭 出 欧美 范 儿 14:51 “* 夏季 养生 指南 : “夫妻 菜 ” 宜 常 吃 10:48 
“* 花边 连衣裙 超 富 人 ?月 穿 搭 出 新 意 11:04 *10 条 食疗 养生 方法 ,居家 宅 人 的 养生 经 13:54 


14-14 ”文本 修饰 样式 
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14.7 ”专家 解 惑 


1. 块 元 素 和 行内 元 素 的 概念 是 什么 ?有 哪些 特点 ? 

块 级 元 素 和 行内 元 素 是 布局 最 基本 的 两 种 元 素 ， 常 见 块 级 元 素 有 div、p、fom、ul、ol、 
IT 等 ， 常 见 行内 元 素 有 span、strong、em 等 。 

块 级 元 素 会 独占 一 行 ， 对 应 于 display:block， 可 以 设置 width、height、margin、padding 属 
性 ; 行内 元 素 不 独占 一 行 ， 对 应 于 display:inline， 相 邻 行内 元 素 会 排列 在 同一 行 里 ， 直 到 排 不 
下 才 换 行 ， 设 置 width、height 属性 无 效 ， 而 margin 和 padding 属性 只 对 设置 水 平方 向 的 right 
和 left 有效。 可 以 通过 修改 display 属性 来 切换 块 级 元 素 和 行内 元 素 。 

display:inline-block 是 行内 的 块 级 元 素 ， 拥 有 块 级 元 素 的 特点 ， 可 以 设置 width、height、 
margin、padding 值 ， 但 又 可 以 与 其 他 行内 元 素 排 在 同一 行 里 。 

2. 当 设 置 多 个 div 并 列 时 ， 为 什么 会 撑 破 整个 布局 ? 

很 多 时 候 ， 尤 其 是 容器 内 有 平行 布局 ， 如 两 三 个 float 的 div 时 ， 宽 度 很 容易 出 现 问 题 。 在 
IE 中 ， 外 层 的 宽度 会 被 内 层 更 宽 的 div 挤 破 。 一 定 要 用 Photoshop 或 Firework 量 取 像素 级 的 精 
度 。 


.314 。 


第 15 章 “CSS3 盒 子 和 DIV 布局 


在 传统 网 页 设计 中 ,为 了 保证 页 面 元 素 位 置 ， 经 常 使 用 表格 来 完成 。 表 格 起 到 了 定位 和 布 
局 的 作用 。 由 于 表格 布局 的 局 限 性 ， 目 前 往往 采用 DIV+CSS3 方式 。CSS3 中 提出 了 盒子 模型 
和 新 增 盒子 模型 来 完成 对 元 素 的 直接 定位 ， 即 能 够 为 页 面 元 素 定 义 边框 ， 并 修饰 内 容 距 离 ， 从 
而 优化 文本 内 容 的 显示 效果 。 本 章 将 学 习 CSS3 盒子 和 DIV 布局 的 方法 和 技巧 。 


15.1 认识 div 层 


使 用 DIV 进行 网 页 排版 是 现在 流行 的 一 种 趋势 ， 如 使 用 CSS3 属性 ， 可 以 轻易 设置 DIV 
位 置 ， 演 变 出 多 种 不 同 的 布局 方式 。 


15.1.1 层 在 HTML 布局 应 用 


<div> 标 记 是 一 个 区 块 容器 标记 ， 在 <div></div> 标 记 中 可 以 放置 其 他 的 一 些 HTML 元 素 ， 
如 段落 <p>、 标 题 <h1>、 表 格 <table>、 图 片 <img> 和 表单 等 。 然 后 使 用 CSS3 相关 属性 对 div 容 
器 标记 中 的 元 素 作为 一 个 独立 对 象 进行 修饰 ， 这 样 就 不 会 影响 其 他 HIML 元 素 。 


【 例 15.1】 实例 文件 :ch15\15.1.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title>div 层 </title> 

<style type="text/css"> 

divt{ 
font-size:18px; 
font-weight:bolder; 
font-family:“ 幼 圆 ”; 
Color:#FF0000; 
background-color:#eeddcc; 
text-align:center; 
width:300px; 
height:100px; 
border:1px #992211 dotted; 
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F 
</style> 
</head> 
<body> 
<center> 
<div> 
这 是 div 层 
</div> 
</center> 
</body> 
</html> 


上 面 例子 通过 CSS 对 div 块 控制 , 绘制 了 一 个 div 容器 , 容器 中 放置 了 一 段 文 字 。 在 I 下 11.0 
中 浏览 效果 如 图 15-1 示 ， 可 以 看 到 一 个 矩形 方块 的 div 层 ， 居 中 显示 ,字体 显 示 为 红色 ， 边 框 
为 浅 红色 ， 背 景色 为 浅黄 色 。 


- 0O x 
着 ”DA\ 本 书 源 代 码 \code\c 国 ~ 中。 搜索. 
刁 div 层 本 
户 当 百 帮 一下 ， 你 孔 知 道 
这 是 div 层 


图 15-1 div 层 显 示 


15.1.2 div 和 span 区 别 

对 于 初学 者 而 言 ，div 和 span 两 个 标记 常常 混淆 ， 因 为 大 部 分 的 div 层 都 可 以 使 用 span 标 
记 代 替 , 并 且 其 运行 效果 完全 一 样 , 例如 上 一 节 中 的 例子 , 就 可 以 使 用 span 标记 代替 div 标记 ， 
其 运行 效果 完全 保持 一 致 。 可 以 这 样 说 ， 在 使 用 区 块 对 HIML 元 素 进行 包含 方面 ，div 和 span 
标记 的 作用 基本 一 样 。 

div 和 span 标记 二 者 的 区 别 在 于 ，div 是 一 个 块 级 元 素 ， 其 包含 的 元 素 会 自动 换行 。span 
标记 是 一 个 行内 标记 ， 其 前 后 都 不 会 发 生 换行 。div 标记 可 以 包含 span 标记 元 素 , 但 span 标记 
一 般 不 包含 div 标记 。 


【 例 15.2】〔 实 例文 件 : ch15\15.2.html) 
<!DOCTYPE html> 

<html> 

<head> 

<title>div 与 span 的 区 别 </title> 
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</head> 

<body> 
<p>div 自 动 分 行 : </p> 
<div><b> 宁 静 </b></div> 
<div><b> 致 远 </b></div> 
<div><b> 明 治 </b></div> 
<p>span 同 一 行 : </p> 
<span><b> 老 虎 </b></span> 
<span><b> 狮 子 </b></span> 
<span><b> 老 鼠 </b></span> 

</body> 

</html> 


在 正 11.0 中 浏览 效果 如 图 15-2 示 ， 可 以 看 到 div 层 所 包含 的 元 素 ， 进 行 自动 换行 ， 
于 span 标记 ，3 个 HTML 元 素 在 同一 行 显示 。 


ee 
司 “Dx 本 书 源 代码 codevc 图 ”|| 搜索 

后 dv 与 span 的 区 别 全 

请 全 百 放下， 人 Btx0 适 


div 自 动 分 行 : 


span 同 一 行 : 


老虎 狮子 老鼠 


图 15-2 div 和 span 比较 


枝 巧 提示 


元 素 ， 可 以 使 用 span 标记 完成 。 


15.2 盒子 模型 


而 对 


在 网 页 设计 中 ,对 于 较 大 的 块 可 以 使 用 div 完成 ,而 对 于 具有 独特 样式 的 单独 HTML 


将 网 页 上 每 个 HTML 元 素 都 认为 是 长 方形 的 盒子 ， 是 网 页 设计 上 的 一 大 创新 。 在 控制 页 


面 方面 ， 盒 子 模型 起 着 至 关 重 要 的 作用 ， 熟 练 掌握 盒子 模型 及 其 盒子 模型 各 个 属性 ， 是 控制 页 


面 中 每 个 HTML 元 素 的 前 提 。 
15.2.1 什么 是 盒子 模型 


CSS3 中 ， 所 有 的 页 面 元 素 都 包含 在 一 个 矩形 框 内 ， 称 为 盒子 。 盒 子 描述 了 元 素 及 其 属性 


在 页 面 布局 中 所 占 的 空间 大 小 ， 


因此 盒子 可 以 影响 其 他 元 素 的 位 置 及 大 小 。 例 如 ， 页 面 中 第 一 
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个 盒子 为 10 像素 ， 那 么 下 一 个 盒子 就 处 于 离 顶部 10 像素 距离 的 位 置 。 如 果 第 一 个 盒子 增加 为 
20 像素 ， 则 下 一 个 盒子 就 要 再 下 移 10 像素 ， 而 整个 页 面 就 是 由 这 些 个 大 大 小 小 ， 但 不 会 重 倒 
的 盒子 形成 的 。 

盒子 模型 是 由 margin (边界 ) 、border (边框 ) 、padding (空白 ) 和 content (内 容 ) 几 个 
属性 组 成 。 此 外 ， 在 盒子 模型 中 还 具备 高 度 和 宽度 两 个 辅助 属性 。 盒 子 模型 如 图 15-3 所 示 。 


margin-top 


border-top 


padding-top 


content 


padding-bottom 


boder-bottom 


margin-bottom 


图 15-3 ”盒子 模型 效果 图 


从 图 15-3 中 可 以 看 出 ， 盒 子 模 型 包含 如 下 4 部 分 。 


(1) content (内 容 ) : 是 盒子 模型 中 必需 的 一 部 分 ， 内 容 可 以 是 文字 、 图 片 等 元 素 。 
(2) padding (空白 ) : 也 称 内 边 距 或 补 白 ， 用 来 设置 内 容 和 边框 直接 的 距离 。 

(3) border (边框 ) : 可 以 设置 内 容 边框 线 的 粗细 、 颜 色 和 样式 等 ， 前 面 已 经 介绍 过 。 
(4) margin (边界 ) : 外 边 距 ， 用 来 设置 内 容 与 内 容 之 间 的 距离 。 


对 于 这 些 属性 可 以 把 它 转移 到 日 常生 活 中 的 盒子 (箱子 ) 上 来 理解 ， 日 常生 活 中 所 见 的 盒 

子 也 就 是 能 装 东西 的 一 种 箱子 ， 也 具有 这 些 属性 ， 所 以 称 其 为 盒子 模式 。 内 容 (content) 就 是 
盒子 里 装 的 东西 ; 填充 (padding) 就 是 怕 盒 子 里 装 的 东西 (贵重 的 ) 损坏 而 添加 的 泡沫 或 其 他 
各 公 


抗震 的 辅料 ;边框 “boder) 就 是 盒子 本 身 ; 至 于 边界 (margin) 则 说 明 盒 子 摆 放 的 时 候 不 能 全 
部 堆 在 一 起 ， 要 留 出 一 定 的 空隙 保持 通风 ， 同 时 也 为 了 方便 取出 。 


与 现实 生活 中 盒子 不 同 的 是 ,现实 生活 中 的 东西 一 般 不 能 大 于 盒子 ， 否 则 盒子 会 被 
撑 坏 的 ， 而 CSS 盒子 具有 弹性 ， 里 面 的 东西 大 过 盒子 本 身 最 多 把 它 撑 大 ， 但 不 会 
损坏 。 


在 网 页 设计 上 ， 内 容 常 指 文字 、 图 片 等 元 素 ， 但 是 也 可 以 是 小 念 子 (DIV 谈 套 ) ， 
枝 巧 提示 
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一 个 盒子 的 实际 高 度 〈 宽 度 ) 是 由 contenttpadding+bordertmargin 组 成 的 。 在 CSS3 中 ， 
可 以 通过 设置 width 和 height 来 控制 content 的 大 小 , 并 且 对 于 任何 一 个 盒子 ,都 可 以 分 别 设置 
4 条 边 的 border、padding 和 margin。 


15.2.2 border 边框 


border 边框 是 内 边 距 和 外 边 距 的 分 界线 ， 可 以 分 离 不 同 的 HTML 元 素 ，boder 的 外 转 
素 的 最 外 围 。 在 网 页 设计 中 ， 如 果 计 算 元 素 的 宽 和 高 ， 则 需要 把 border 计算 在 内 。 


法 
dl 


【 例 15.3】〔 实 例文 件 : ch15\15.3.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title>border 边 框 </title> 

<style type="text/css"> 

.divli{ 
borde-widthr:10px; 
border-color:#ddccee; 
border-style:solid; 
width:410px; 

} 

.div2{ 
border-width:1px; 
border-color:#adccdd; 
border-style:dotted; 
width:410px; 

| 

.div3{ 
border-width:1px; 
border-color:#457873; 
border-style:dashed; 
width:410px; 

} 

</style> 

</head> 

<body> 

<div class="div1"> 
这 是 一 个 宽度 为 10px 的 实 线 边框 。 

</div><br /><br /> 

<div class="div2"> 
这 是 一 个 宽度 为 1px 的 虚线 边框 。 

</div> <br /><br /> 

<div class="div3"> 
这 是 一 个 宽度 为 1px 的 点 状 边框 。 

</div> 

</body> 
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</html> 


在 正 11.0 中 浏览 效果 如 图 15-4 示 ， 可 以 看 到 显示 了 3 个 不 同 风格 的 盒子 ， 第 一 个 盒子 边 
框 宽度 为 10 像素 ， 边 框 样式 为 实 线 ， 颜 色 为 紫色 ， 第 二 个 盒子 边框 宽度 为 1 像素 ， 边 框 样式 
是 虚线 边框 ， 颜 色 为 浅 绿色 ; 第 三 个 盒子 边框 宽度 为 1 像素 ， 边 框 样式 是 点 状 边框 ， 颜 色 为 绿 
色 。 


- D x 
着 ”DD:\ 本 书 源 代码 \code\c 图 ”搜索 .… 

愿 border 边 框 x 

户 各 百度 一 下 , 你 就 知道 


这 是 一 个 宽度 为 10px 的 实 线 边框 。 


这 是 一 个 宽度 为 1px 的 虚线 边框 。 


图 15-4 设置 盒子 边框 


这 里 需要 注意 的 是 ， 在 给 元 素 设置 background-color 背景 色 时 ，IE 作用 的 区 域 为 
校本 提示 contenttpadding， 而 Firefox 则 是 contenttpadding+border， 这 点 在 border 为 粗 虚线 
时 特别 明显 。 


15.2.3 ”padding 内 边 距 
在 CSS3 中 ， 可 以 设置 padding 属性 定义 内 容 与 边框 之 间 的 距离 ， 即 内 边 距 的 距离 。 
语法 格式 如 下 : 
padding : length 


padding 属性 值 可 以 是 一 个 具体 的 长 度 ， 也 可 以 是 一 个 相对 于 上 级 元 素 的 百分比 ， 但 不 可 
以 使 用 负 值 。 当 设置 值 为 百分数 时 ， 百 分 数值 是 相对 于 其 父 元 素 的 width 计算 的 ， 这 一 点 与 外 
边 距 一 样 。 所 以 ， 如 果 父 元 素 的 width 改变 ， 则 其 值 也 会 改变 。 

padding 属性 能 为 盒子 定义 上 、 下 、 左 、 右 间 降 的 宽度 ， 也 可 以 单独 定义 各 方位 的 宽度 。 
常用 形式 如 下 : 


padding :padding-top | padding-right | padding-bottom | padding-left 
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如 果 提 供 4 个 参数 值 ， 则 将 按 顺 时 针 的 顺序 作用 于 四 边 。 如 果 只 提供 1 个 参数 值 ， 则 将 用 
于 全 部 的 四 条 边 ， 如 果 提 供 2 个 参数 值 ， 则 第 一 个 作用 于 上 下 两 边 ， 第 2 个 作用 于 左右 两 边 ; 
如 果 提供 3 个 参数 值 ， 则 第 1 个 作用 于 上 边 ， 第 2 个 作用 于 左 、 右 两 边 ， 第 3 个 作用 于 下 边 。 
其 具体 含义 如 表 15-1 所 示 。 


表 15-1 padding 属性 子 属性 
描述 
设置 上 间隙 
padding-bottom 设置 下 间隙 
padding-left 设置 左 间隙 
padding-right 设置 右 间隙 


属性 
padding-top 


【 例 15.4】 实例 文件 ，ch15\15.4.html) 


<!DOCTYPE html> 
<html> 
<head> 
<title>padding</title> 
<style type="text/css"> 
.waif 
width:400px; 
height:250px; 
border:1lpx #993399 solid; 
} 
img{ 
max-height:120px; 
padding-left:50px; 
padding-top:20px; 
} 
</style> 
</head> 
<body> 
<div class="wai"> 
<img src="13.jpg" /> 
<p> 这 张 图 片 的 左 内 边 距 是 50px， 顶 内 边 距 是 20px</p> 
</div> 
</body> 
</html> 


在 正 11.0 中 浏览 效果 如 图 15-5 示 ， 可 以 看 到 一 个 div 层 中 显示 了 一 张 图 片 ， 该 图 片 可 以 
看 作 是 一 个 盒子 模型 ， 并 定义 了 图 片 的 左 内 边 距 和 上 内 边 距 的 效果 。 内 边 距 其 实 是 对 象 mg 和 
外 层 DIV 之 间 的 距离 。 
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和 全 ”DA 本 书 源 代码 \code\c 图 ~ 天 到 Do 
padding x 攻 
会 全 百度 一 下 ,你 SEX 者 


这 张 图片 的 左 内 边 距 是 50px， 顶 内 边 距 是 20px 


图 15-5 设置 内 边 距 


15.2.4 ” margin 外 边 距 

margin 边界 用 来 设置 页 面 中 元 素 和 元 素 之 间 的 距离 ， 即 定义 元 素 周 围 的 空间 范围 ,是 页 面 
排版 中 一 个 比较 重要 的 概念 。 

语法 格式 如 下 : 


margin : auto | length 

其 中 auto 表示 根据 内 容 自 动 调整 ， length 表示 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 或 百 
分 数 ， 百 分 数 是 基于 父 对 象 的 高 度 。 对 于 内 联 对 象 来 说 ， 左 右 外 延边 距 可 以 是 负数 值 。 

margin 属性 包含 的 4 个 子 属性 控制 一 个 页 面 元 素 四 周 的 边 距 样式 ， 如 表 15-2 所 示 。 


表 15-2 margin 属性 子 属性 


margin-top 设置 上 边 距 
margin-bottom 设置 下 边 距 
margin-left 设置 左边 距 
margin-right 设置 右边 距 


各 子 属性 的 属性 值 同样 可 以 是 一 个 确定 的 长 度 ， 也 可 以 是 一 个 百分比 ， 该 百分比 相对 于 其 
上 级 元 素 的 宽度 (width) 。 

在 给 margin 设置 值 时 ， 如 果 提 供 4 个 参数 值 ， 则 将 按 顺 时 针 的 顺序 作用 于 四 边 。 如 果 只 
提供 1 个 参数 值 , 则 将 作用 于 全 部 的 四 条 边 ; 如 果 提供 2 个 参数 值 , 则 第 1 个 作用 于 上 下 两 边 ， 
第 2 个 作用 于 左右 两 边 ; 如 果 提 供 3 个 参数 值 , 则 第 1 个 作用 于 上 边 , 第 2 个 作用 于 左右 两 边 ， 
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第 3 个 作用 于 下 边 。 

如 果 希 望 很 精确 地 控制 块 的 位 置 ， 则 需要 对 margin 有 更 加 深入 地 了 解 。margin 设置 可 以 
分 为 行内 元 素 块 之 间 设 置 、 非 行内 元 素 块 之 间 设 置 和 父子 块 之 间 设 置 。 

1. 行内 元 素 margin 设置 


【 例 15.5】〔 实 例文 件 : ch15\15.5.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 行 内 元 素 设置 mnargin</title> 

<style type="text/css"> 

span{ 
background-color:#a2d2ff; 
text-align:center; 
font-family:" 幼 圆 "; 
font-size:12px; 
padding:10px; 
border:1lpx #ddeecc solid; 

| 

span.left{ 
margin-right:20px; 
background-color:#a9d6ff; 


} 
span.right{ 
margin-left:20px; 
background-color:#eeb0b0: 
} 
</style> 
</head> 
<body> 
<span class="1left"> 行 内 元 素 1</span><span class="right"> 行 内 元 素 2</span> 
</body> 
</html> 


在 正 11.0 中 浏览 效果 如 图 15-6 所 示 ， 可 以 看 到 一 个 蓝 色 盒子 和 红色 盒子 ， 二 者 之 间 的 距 
离 使 用 margin 设置 ， 其 距离 是 左边 盒子 的 右边 距 margin-right 加 上 右边 盒子 的 左边 距 


margin-left。 


外”D:\ 本 书 源 代 码 codeNc 轿 ~ 他 搜索 … 
愿 行内 元 素 设置 margin x | 
堵 当 百 度 下 ， 你 就 知道 


行内 元 素 2 


图 15-6 设置 外 边 距 
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2. 非 行内 元 素 块 之 间 margin 设置 
如 果 不 是 行内 元 素 ， 而 是 产生 换行 效果 的 块 级 元 素 ， 情 况 就 会 发 生变 化 。 两 个 换行 块 级 元 
素 之 间 的 距离 不 再 是 margin-bottom 和 margin-top 的 和 ， 而 是 两 者 中 的 较 大 者 。 


【 例 135.6】 《实例 文件 : ch15\15.6.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 块 级 元 素 的 margin</title> 

<style type="text/css"> 

hit 
background-color:#ddeecc; 
text-align:center; 
font-family:" 幼 圆 "; 
font-size:12px; 
padding:10px; 
border:1lpx #445566 solid; 
display:block; 

} 

</style> 

</head> 

<body> 

<hl style="margin-bottom:50px;"> 距 离 下 面 块 的 距离 </h1> 

<hl style="margin-top:30px;"> 距 离 上 面 块 的 距离 </h1> 

</body> 

</html> 


在 正 11.0 中 浏览 效果 如 图 15-7 所 示 , 可 以 看 到 两 个 hl 盒子 , 二 者 上 下 之 间 存在 距离 ,其 
距离 为 margin-bottom 和 margin-top 中 较 大 的 值 ， 即 50 像素 。 如 果 修 改 下 面 hl 盒子 元 素 的 
margin-top 为 40 像素 ， 则 会 发 现 执行 结果 没有 任何 变化 ， 如 果 修 改 其 值 为 60 像素 ， 则 会 发 现 
下 面 的 盒子 向 下 移动 10 个 像素 。 


- OO x 
站 ”D:\ 本 书 源 代码 \code\c 国 ”| 搜索 .… 只 - 
大 块 级 元 素 的 margin x | 
诊 当 百 度 一 下 ， 你 就 知道 
距 高 下 面 块 的 距 高 
距离 上 面 块 的 距 高 


图 15-7 设置 上 下 margin 距离 
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3. 父子 块 之 间 margin 设置 
当 一 个 div 块 包含 在 另 一 个 div 块 中 间 时 ， 二 者 便 会 形成 一 个 典型 的 父子 关系 。 其 中 子 块 
的 margin 设置 将 会 以 父 块 的 content 为 参考 。 


【 例 15.7】〔 实 例文 件 : ch15\15.7.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 包 含 块 的 margin</title> 

<style type="text/css"> 

divt{ 
background-color:#fffebb; 
padding:10px; 
border:1lpx solid #000000; 

} 

hi{ 
background-color:#a2d2ff; 
margin-top:0px; 
margin-bottom:30px; 
padding:15px; 
border:1px dashed #004993; 
text-align:center; 
font-family:" 幼 圆 "7 
font-size:12px; 

} 

</style> 

</head> 

<body> 

<div > 
<h1> 子 块 div</h1> 

</div> 

</body> 

</html> 


在 正 11.0 中 浏览 效果 如 图 15-8 所 示 ， 可 以 看 到 子 块 hl 盒子 距离 父 div 下 边界 为 40 像素 
( 子 块 30 像素 的 外 边 距 加 上 父 块 10 像素 的 内 边 距 )， 其 他 3 边 距离 都 是 父 块 的 padding 距离 ， 
即 10 像素 。 


@ 间 DA 本 书 漂 代 码 YXode\c 国 ”搜索 p- 
|§ 人 margin x 回 
去 EE 下 . (en 首 


图 15-8 设置 包括 盒子 的 margin 距离 
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在 上 例 中 , 如果 设置 了 父 元 素 的 高 度 height 值 , 并 且 父 块 高 度 值 小 于 子 块 的 高 度 加 上 margin 
的 值 , 则 下 浏览 器 会 自动 扩大 , 保持 子 元 素 的 margin-bottom 的 空间 及 父 元 素 的 padding-bottom。 
而 Firefox 就 不 会 这 样 ， 会 保证 父 元 素 height 高 度 的 完全 吻合 ， 而 子 元 素 将 超过 父 元 素 的 范围 。 

当 将 margin 设置 为 负数 时 ， 会 使 得 被 设 为 负数 的 块 向 相反 的 方向 移动 ， 甚 至 覆盖 在 另外 
的 块 上 。 


15.3 CSS3 新 增 弹性 盒 模型 


CSS3 引入 了 新 的 盒 模型 处 理 机 制 ， 即 弹性 盒 模型 。 该 模型 决定 元 素 在 盒子 中 的 分 布 方式 
以 及 如 何 处 理 盒子 的 可 用 空间 。 通 过 弹性 盒 模型 ， 可 以 轻松 地 设计 出 自 适 应 浏览 器 窗口 的 流动 
布局 或 自 适 应 字体 大 小 的 弹性 布局 。 

CSS3 为 了 弹性 盒 模型 ， 新 增 了 8 个 属性 ， 如 表 15-3 所 示 。 


表 15-3 CSS3 新 增 盒子 模型 属性 


属性 说 明 

box-orient 定义 盒子 分 布 的 坐标 轴 

box-align 定义 子 元 素 在 盒子 内 垂直 方向 上 的 空间 分 配方 式 
box-direction 定义 盒子 的 显示 顺序 

box-flex 定义 子 元 素 在 盒子 内 的 自 适 应 尺寸 

box-flex-group 定义 自 适应 子 元 素 群 组 

box-lines 定义 子 元 素 分 布 显示 

box-ordinal-group 定义 子 元 素 在 盒子 内 的 显示 位 置 

box-pack 定义 子 元 素 在 盒子 内 的 水 平方 向 上 的 空间 分 配方 式 


15.3.1 盒子 布局 取向 box-orient 


box-orient 属性 用 于 定义 盒子 元 素 内 部 的 流动 布局 方向 。 
语法 格式 如 下 : 


box-orient:horizontal | vertical | inline-axis | block-axis | inherit 


其 参数 值 含义 如 表 15-4 所 示 。 
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表 15-4 box-orient 属性 值 


属性 值 说 明 

horizontal 盒子 元 素 从 左 到 右 在 一 条 水 平 
vertical 盒子 元 素 从 上 到 下 在 一 条 垂直 线 
inline-axis 盒子 元 素 沿 着 内 联 轴 显 示 它 的 子 元 素 
block-axis 盒子 元 素 沿 着 块 轴 显 示 它 的 子 元 素 


弹性 盒 模型 是 W3C 标准 化 组 织 于 2009 年 发 布 的 ， 目 前 还 没有 主流 浏览 器 对 其 支持 ， 不 过 
采用 Webkit 和 Mozilla 泻 染 引 擎 的 浏览 器 都 自 定 义 了 一 套 私 有 属性 ， 用 来 支持 弹性 盒 模型 。 下 
面 代码 中 会 存在 一 些 Firefox 浏览 器 的 私有 属性 定义 。 


【 例 15.8】〔 实 例文 件 ，ch15\15.8.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 

box-orient 

</title> 

<style> 

div{height:50px;text-align:center;} 

.dl{background-color:#F6F;width:180px;height:300px} 

.d2{background-color:#3F9;width:300px;height:300px} 

.d3{background-color:#FCd;width:180px;height:300px} 

body{ 
display:box;/x* 标 准 声明 ， 盒 子 显示 */ 
display:-moz-box;/x* 兼 容 Mozilla Gecko 引 擎 浏览 器 */ 
orient:horizontal;/x* 定 义 元 素 为 盒子 显示 */ 
-mozbox-box-orient:horizontal;/x* 兼 容 Mozilla Gecko 引 擎 浏览 器 */ 
box-orient:horizontal;/*CSS3 标 准 化 设置 */ 

1 

</style> 

</head> 

<body> 

<div class=d1> 左 侧 布局 </div> 

<div class=d2> 中 间 布 局 </div> 

<div class=d3> 右 侧 布局 </div> 

</body> 

</html> 


上 面 代 码 中 , CSS 样式 首先 定义 了 每 个 div 层 的 背景 色 和 大 小 , 在 body 标记 选择 器 中 定义 
了 body 容器 中 元 素 以 盒子 模型 显示 ， 并 使 用 box-orient 定义 元 素 水 平 并 列 显示 。 
在 Firefox 62.0 中 浏览 效果 如 图 15-9 所 示 ， 可 以 看 到 显示 了 3 个 层 ，3 个 div 层 并 列 显示 ， 
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分 别 为 “ 左 侧 布局 ”“ 中 间 布 局 ”和 “ 右 侧 布局 ”。 


图 15-9 盒子 元 素 水 平 并 列 显示 


15.3.2 ”盒子 布局 顺序 box-direction 


box-direction 是 用 来 确定 子 元 素 的 排列 顺序 ， 也 可 以 说 是 内 部 元 素 的 流动 顺序 。 
语法 格式 如 下 : 


box-direction:normal | reverse | inherit 
其 参数 值 如 表 15-5 所 示 。 
表 15-5 ”box-direction 属性 值 


属性 值 | 说 明 

正常 显示 顺序 ， 如 果 盒 子 元 素 的 box-orient 属性 值 为 horizontal， 则 其 包含 的 子 元 素 按照 从 
左 到 右 的 顺序 显示 ， 即 每 个 子 元 素 的 左边 总 是 靠近 前 一 个 子 元 素 的 右边 ， 如 果 盒子 元 素 的 
box-orient 属性 值 为 vertical， 则 其 包含 的 子 元 素 按照 从 上 到 下 的 顺序 显示 

反 向 显示 ， 盒 子 所 包含 的 子 元 素 的 显示 顺序 将 与 normal 相反 


继承 上 级 元 素 的 显示 顺序 


Dormal 


reverse 


inherit 


【 例 15.9】 实例 文件 ，ch15\15.9.html) 
<!DOCTYPE html> 

<html> 

<head> 

<title> 

box-direction 

</title> 

<style> 
div{height:50px;text-align:center;} 
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.dl{background-color:#F6F;width:180px;height:300px} 

.d2{background-color:#3F9;width:300px;height:300px} 

.d3{background-color:#FCd;width:180px;height:300px} 

bodyt{ 
display:box;V* 标 准 声明 ， 盒 子 显示 */ 
display:-moz-box;/x* 兼 容 Mozilla Gecko 引 擎 浏览 器 */ 
orient:horizontal;/x* 定 义 元 素 为 盒子 显示 */ 
-mozbox-box-orient:horizontal;/* 兼 容 Mozilla Gecko 引 擎 浏览 器 */ 
box-orient:horizontal;/*css3 标 准 声明 */ 
-moz-box-direction:reverse; 
box-direction:reverse; 

} 

</style> 

</head> 

<body> 

<div class=d1> 左 侧 布局 </div> 

<div class=d2> 中 间 布 局 </div> 

<div class=d3> 右 侧 布局 </div> 

</body> 

</html> 


可 以 发 现 此 实例 代码 与 上 一 个 实例 代码 基本 相同 ,只 不 过 多 了 一 个 box-direction 属性 设置， 
此 处 设置 布局 进行 反 向 显示 。 

在 Firefox 62.0 中 浏览 效果 如 图 15-10 所 示 ， 可 以 发 现 与 上 一 个 图 形 相 比 ， 左 侧 布局 和 右 
侧 布局 进行 了 互 换 。 


box-direction 


所 仿 GQ © filey//D/ 本 书 源 代 码 /code/ch15/15.9.html 


右 侧 布局 


图 15-10 盒子 布局 顺序 设置 


15.3.3 ”盒子 布局 位 置 box-ordinal-group 


box-ordinal-group 属性 设置 盒子 中 每 个 子 元 素 在 盒子 中 的 具体 位 置 。 
语法 格式 如 下 : 
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box-ordinal-group:<integer> 


参数 值 mteger 是 一 个 自然 数 ， 从 1 开始 ,用 来 设置 子 元 素 的 位 置 序号 ， 子 元 素 分 别 根据 这 
个 属性 从 小 到 大 进行 排列 。 默 认 情况 下 ， 子 元 素 会 根据 元 素 的 位 置 进 行 排列 。 如 果 没 有 知道 
box-ordinal-group 属性 值 的 子 元 素 ， 则 其 序号 默认 都 为 1， 并 且 序 号 相同 的 元 素 将 按照 它们 在 
文档 中 加 载 的 顺序 进行 排列 。 


【 例 15.10】《〔 实 例文 件 : ch15\15.10.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 

box-ordinal-group 

</title> 

<style> 

body{ 
margin:0; 
padding:0; 
text-align:center 
background-color:#d9bfe8; 

} 

.box{ 
margin:auto; 
text-align:center; 
width:988px; 
display:-moz-box; 
display:box; 
box-orient:vertical; 
-moz-box-orient:vertical; 

} 

.boxl{ 

-moz-box-ordinal-group:27 
box-ordinal-group:2; 


-moz-box-ordinal-group:3; 
box-ordinal-group:3; 


-moz-box-ordinal-group:1; 
box-ordinal-group:1; 


-moz-box-ordinal-group:47 
box-ordinal-group:4; 
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</style> 

</head> 

<body> 

<div class=box> 

<div class=boxl><img src=1.jpg/></div> 
<div class=box2><img src=2.jpg/></div> 
<div class=box3><img src=3.jpg/></div> 
<div class=box4><img src=4.jpg/></div> 
</div> 

</body> 

</html> 


在 上 面 的 代码 中 ， 类 选择 器 box 中 代码 display:box 设置 了 容器 以 盒子 方向 显示 ， 
box-orient:vertical 代码 设置 排列 方向 从 上 到 下 。 在 下 面 的 box1、box2、box3 和 box4 类 选择 器 
中 通过 box-ordinal-group 属性 都 设置 了 显示 顺序 。 

在 Firefox 62.0 中 浏览 效果 如 图 15-11 所 示 ， 可 以 看 到 第 3 个 层次 显示 在 第 一 个 和 第 二 
层次 之 上 。 


filey//DJ 本 书 尖 {t53/code/ch15115.10.html 
下 百科 hao123 | 更 多 


Bai 改 se 


新 闻 网 而 贴吧 知道 MP3 图 片 视频 地 图 
百度 一 下 | 多 和 法 


EEE 
AHR | ME | | so esiau 


图 15-11 设置 层 显示 顺序 


15.3.4 ”盒子 弹性 空间 box-flex 

box-flex 属性 能 够 灵活 地 控制 子 元 素 在 盒子 中 的 显示 空间 。 显 示 空 间 包括 子 元 素 的 宽度 和 
高 度 ， 而 不 只 是 子 元 素 所 在 栏目 的 宽度 ， 也 可 以 说 是 子 元 素 在 盒子 中 所 占 的 面积 。 

语法 格式 如 下 : 


box-flex:<number> 


<number> 属 性 值 是 一 个 整数 或 小 数 。 当 盒子 中 包含 多 个 定义 了 box-flex 属性 的 子 元 素 时 ， 
浏览 器 将 会 把 这 些 子 元 素 的 box-flex 属性 值 相 加 ， 然 后 根据 它们 各 自 的 值 占 总 值 的 比例 来 分 配 
盒子 剩余 的 空间 。 
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% box-flex 属性 只 有 在 盒子 拥有 确定 的 空间 大 小 时 才能 够 正确 解析 ， 即 为 盒子 定义 具 
Ee 和 体 的 width 和 height 属性 值 。 


【 例 15.11】〔 实 例文 件 : ch15\15.11.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 

box-flex 

</title> 

<style> 

body{ 

margin:0; 

padding:0; 

text-align:center; 

} 

.box{ 

height:50px; 

text-align:center; 

width:960px; 

overflow:hidden; 
display:box;V/* 标 准 声明 ， 盒 子 显示 */ 
display:-moz-box;/x* 兼 容 Mozilla Gecko 引 擎 浏览 器 */ 
orient:horizontal7/* 定 义 元 素 为 盒子 显示 */ 
-mozbox-box-orient:horizontal;/x* 兼 容 Mozilla Gecko 引 擎 浏览 器 x/ 
box-orient:horizontal;/*css3 标 准 声明 */ 
} 

scl 

background-color:#F6F; 
width:180px; 

height:500px; 

} 

a eh 

border:solid lpx #CCC; 
margin:2px; 

} 

.d21{ 

-moz-box-flex:27 

box-flex:2; 
background-color:#3F9; 
height:500px; 

} 

a3t{ 

-moz-box-flex:47 

box-flex:4; 
background-color:#FCd; 
height:500px; 

} 

.d2 div,.d3 div{display:inline;} 
</style> 

</head> 
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<body> 

<div class=box> 

<div class=d1> 左 侧 布局 </div> 
<div class=d2> 中 间 布 局 </div> 
<div class=d3> 右 侧 布局 </div> 
</div> 

</body> 

</html> 


上 面 CSS 样式 代码 中 ， 使 用 display:box 语句 设置 容器 内 元 素 以 盒子 方式 布局 ; 


box-orient:horizontal 语句 设置 盒子 之 间 在 水 平方 向 上 并 列 显 示 ; 类 选择 器 dl 中 使 用 width 和 
height 设置 显示 层 的 大 小 ， 而 在 d2 和 d3 中 ， 使 用 box-flex 分 别 设置 两 个 盒子 显示 面积 
在 Firefox 62.0 中 浏览 效果 如 图 15-12 所 示 ， 可 以 看 到 右 侧 布局 所 占 空 间 比 中 间 汕 司 大 。 


EE 


图 15-12 ”设置 盒子 面积 


15.3.5 “管理 盒子 空间 box-pack 和 box-align 


当 弹 性 元 素 和 非 弹性 元 素 混合 排版 时 , 可 能 会 出 现 所 有 子 元 素 的 尺寸 大 于 或 小 于 盒子 的 尺 
寸 ， 从 而 出 现 盒子 空间 不 足 或 富余 的 情况 ， 这 时 就 需要 一 种 方法 来 管理 盒子 的 空间 。 如 果子 元 
素 的 总 尺寸 小 于 盒子 的 尺寸 ， 则 可 以 使 用 box-aling 和 box-pack 属性 进行 管理 。 
box-pack 属性 可 以 用 于 设置 子 容器 在 水 平 轴 上 的 空间 分 配方 式 。 语 法 格式 如 下 : 


box-pack:startlendlcenter|justify 


其 参数 值 含义 如 表 15-6 所 示 。 


15-6 ”box-pack 属性 值 


i 所 有 子 容器 都 分 布 在 父 容器 的 左 侧 ， 右 侧 留 空 
| aa | 所 有 子 容器 都 分 布 在 父 容器 的 右 侧 ， 左 侧 留 空 
| justiy 。 | 所 有 子 容 器 平均 分 布 (默认 值 ) 


center 平均 分 配 父 容器 剩余 的 空间 〈 能 压缩 子 容器 的 大 小 ， 并 且 有 全 局 居中 的 效果 ) 
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box-align 属性 用 于 管理 子 容器 在 竖 轴 上 的 空间 分 配方 式 。 语 法 格式 如 下 : 


box-align: startlendlcenterlbaseline|stretch 


其 参数 值 含义 如 表 15-7 所 示 。 
表 15-7 ”box-align 属性 值 


说 明 
子 容器 从 父 容器 顶部 开始 排列 ， 富 余 空 间 显示 在 盒子 底部 
end 子 容器 从 父 容器 底部 开始 排列 ， 富 余 空间 显示 在 盒子 顶部 
center 子 容器 横向 居中 ， 富 余 空间 在 子 容器 两 侧 分 配 ， 上 面 一 半 下 面 一 半 


baseline ”| 所 有 盒子 沿 着 它们 的 基线 排列 ， 富 余 的 空间 可 前 可 后 显示 
每 个 子 元 素 的 高 度 被 调整 到 适合 盒子 的 高 度 显 示 ， 即 所 有 子 容器 和 父 容器 保持 同一 高 度 


【 例 15.12】“〈 实 例文 件 : ch15\15.12.html) 


<!DOCTYPE html> 
<html> 
<head> 
<title> 
box-pack 
</title> 
<style> 
body,html{ 
height:100%; 
width:100%; 
} 
body{ 
margin:0; 
padding:0; 
display:box;/* 标 准 声明 ， 盒 子 显示 */ 
display:-moz-box;/x* 兼 容 Mozilla Gecko 引 擎 浏览 器 */ 
-mozbox-box-orient:horizontal;/x* 兼 容 Mozilla Gecko 引 擎 浏览 器 */ 
box-orient:horizontal;/*css3 标 准 声 明 */ 
-moz-box-pack:center; 
box-pack:center; 
-moz-box-align:center; 
box-align:center; 
background:#04082b url(a.jpg) no-repeat top center; 
; 
-boxt{ 
border:solid lpx red; 
padding:4px; 


</style> 
</head> 
<body> 
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<div class=box> 
<img src=yueji.jpg> 
</div> 

</body> 

</html> 


上 面 代码 中 ，display:box 语句 定义 了 容器 内 元 素 以 盒子 形式 显示 ; box-orient:horizontal 定 
义 了 盒子 水 平 显示 ，box-pack:center 定义 了 盒子 两 侧 空 间 平 均 分 配 ，box-align:center 定义 了 盒 
子 上 下 两 侧 平 均 分 配 ， 即 图 片 盒子 居中 显示 。 

在 Firefox 62.0 中 浏览 效果 如 图 15-13 所 示 ， 可 以 看 到 中 间 盒 子 在 容器 中 部 显示 。 


图 15-13 ”设置 盒子 中 间 显 示 


15.3.6 ”空间 溢出 管理 box-lines 


弹性 布局 中 盒子 内 的 元 素 很 容易 出 现 空间 溢出 的 现象 ， 与 传统 的 盒子 模型 一 样 ，CSS3 多 
许 使 用 overflow 属性 来 处 理 溢 出 内 容 的 显示 。 当 然 ， 还 可 以 使 用 box-lines 属性 来 避免 空间 洪 
出 的 问题 。 

语法 格式 如 下 : 


box-lines:singlelmultiple 
其 中 参数 值 single 表示 子 元 素 都 单行 或 单列 显示 ; multiple 表示 子 元 素 可 以 多 行 或 多 列 显示 。 


【 例 15.13】〔 实 例文 件 ，ch15\15.13.html) 


<!DOCTYPE html> 
<html> 

<head> 

<title> 
box-lines 
</titLle> 
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<style> 
.boxt{ 
border:solid lpx red; 
width:600px; 
height:400px; 
display:box;V/* 标 准 声明 ， 盒 子 显示 */ 
display:-moz-box;/* 兼 容 Mozilla Gecko 引 擎 浏览 器 */ 
-mozbox-box-orient:horizontal7/x* 兼 容 Mozilla Gecko 引 擎 浏览 器 */ 
-moz-box-lines:multiple; 
box-lines:multiple; 
} 
abox divt 
margin:4px; 
border:solid lpx #aaa; 
-moz-box-flex:1; 
box=fleoxsL 
} 
.box div img{width120px;} 


</style> 

</head> 

<body> 

<div class=box> 

<div><img src="b.jpg"></div> 
<div><img .jpg"></div> 
<div><img .jpg"></div> 
<div><img .jpg"></div> 
<div><img src="f.jpg"></div> 
</div> 

</body> 


在 Firefox 62.0 中 浏览 效果 如 图 15-14 所 示 , 可 以 看 到 右边 盒子 还 是 发 生 溢出 现象 。 这 是 因 
为 目前 各 大 主流 浏览 器 还 没有 明确 支持 这 种 用 法 , 所 有 导致 box-lines 属性 被 实际 应 用 时 显示 无 
效 。 相 信 在 未 来 的 一 段 时间 内 ， 各 个 浏览 器 会 支持 该 属性 。 


< 忆 DD filey//Dy 本 书 源 代 三 /code/ch1s/15.13 html 下 回信» 加 


FR WS 


图 15-14 溢出 管理 
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15.4 ”综合 实例 1 图 文 排版 效果 


一 个 宣传 页 需要 包括 文字 和 图 片 信息 。 本 实例 将 结合 前 面 学 习 的 盒子 模型 及 其 相关 属性 创 
建 一 个 旅游 宣传 页 。 具 体 步骤 如 下 : 


[0 由 分 析 需 求 。 


整个 宣传 页 面 需要 一 个 div 层 包含 并 带 有 边框 ，div 层 包 括 两 个 部 分 上 部 空间 包含 一 个 
图 片 ， 下 面 显示 文本 信息 并 带 有 底 边 框 ; 下 部 空间 显示 两 张 图 片 。 


L@ 到 构建 HIML 页 面 ， 使 用 DIV 搭建 框架 。 


<!DOCTYPE html> 
<html> 
<head> 
<title> 图 文 排版 </title> 
</head> 
<body> 
<div class="big"> 
<div class="up"> 
<img src="top.jpg" border="0" /> 
<p>。 反 季 游 正 流行 众 信 旅 游 暑 期 邀 你 到 南半球 过 冬 </p> 
<p> “西安 世 园 会 暨 旅游 推介 会 今日 在 沈阳 举行 ! </p> 
<p> 。 澳 大 利 亚 旅游 局 中 国 区 首 代 邓 李 宝 英 八 月 底 站 任 </p> 
<p> ““ 彩 虹 部 落 ” 土族 :旅游 经 济 支撑 下 的 文化 记忆 恢复 (组 图 ) </p> 
</div> 
<div class="down"> 
<img src="bottoml.jpg" border="0" />gnbsp;é&nbsp;&nbsp;&nbsp;<img 
src="bottom2.jpg" border="0" /> 
</div> 
</div> 
</body> 
</html> 


在 下 11.0 中 浏览 效果 如 图 15-15 所 示 ， 可 以 看 到 页 面 自 上 向 下 ， 显 示 图 片 、 段 落 信息 和 
图 片 。 


I@3j 添加 CSS 代码 ， 修 饰 整体 DIV。 


<style> 

1 
padding:0px; 
margin:0px; 

} 

body{ 
font-family:" 宋 体 "; 
font-size:12px; 
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; 

-big{ 
width:220px; 
border:#0033FF lpx solid; 
margin:10px 0 0 20px; 

} 

</style> 


CSS 样式 代码 在 boyd 标志 选择 器 设置 了 字体 类 型 和 字体 大 小 , 并 在 big 类 选择 器 中 设置 整 
个 层 的 宽带 、 边 框 样式 和 外 边 距 。 

在 正 11.0 中 浏览 效果 如 图 15-16 所 示 ， 可 以 看 到 页 面 图 片 信息 和 文本 都 在 一 个 矩形 盒子 
内 的 现象 ， 其 边框 颜色 为 蓝 色 ， 大 小 为 1 像素 。 


' 反 季 游 正 流行 众 信 旅 游 署 期 激 你 到 南半球 过 冬 


, 反 季 游 正 流行 众 信 旅游 署 期 六 你 到 南 


“西安 世 园 会 茎 旅游 推介 会 今日 在 沈阳 举行 ! * 西安 世 园 会 矣 旅游 推介 会 今日 在 沈阳 举 

* 澳大利亚 旅游 局 中 国 区 首 代 邓 李 宝 茵 作 月 底 郑 任 * Fp a 

， “彩虹 部 落 ” 土 族 :旅游 经 济 支撑 下 的 文化 记忆 恢复 * “彩虹 部 落 ” 土 族 :旅游 经 济 支撑 下 的 

(组 图 ) 化 记忆 恢复 蛆 图 ) 
-= 
图 15-15 构建 HTML 文档 图 15-16 设置 整体 DIV 样式 


1 辐 添加 CSS 代码 ， 修 饰 字体 和 图 片 。 


-up Pf{ 
margin:5px; 

} 

.up img{ 
margin:5px; 
text-align:center;} 

.down{ 
text-align:center; 
border-top:#FF0000 lpx dashed; 

| 

.down img{ 
margin-top:S5px; 


} 


上 面 代码 定义 了 段落 、 图 片 的 外 边 距 ， 如 margin-top:5px 语句 设置 了 下 面 图片 的 外 边 距 为 
5 像素 ， 两 个 图 片 距离 是 10 像素 。 

在 正 11.0 中 浏览 效果 如 图 15-17 所 示 ， 可 以 看 到 字体 居中 显示 ， 下 面 带 有 一 个 红色 虚线 ， 
宽度 为 1 像素 。 


CSS3 盒子 和 DIV 布局 第 15 章 


* 反 季 游 正 流行 众 信 旅游 署 期 邀 你 到 
南半球 过 冬 
.西安 世 园 会 车 旅游 推介 会 今日 在 沈阳 


* 澳大利亚 旅游 局 中 国 区 首 代 邓 李 宝 茵 
八 月 底 闻 任 

“ “彩虹 部 落 ” 土 族 :旅游 经 济 支撑 下 
的 文化 记忆 恢复 组 图 ) 


图 15-17 设置 各 个 元 素 外 边 距 


15.5 ”综合 实例 2 一 一 淘宝 导购 菜单 
现在 ， 网 上 购物 已 经 成 为 一 种 时 尚 ， 其 中 淘宝 网 是 网 上 购物 网 站 影响 比较 大 的 网 站 之 一 。 
淘宝 网 的 宣传 页 面 ， 到 处 都 是 。 本 实例 结合 前 面 学 习 的 知识 创建 一 个 淘宝 网 宣传 导航 页 面 。 具 
体 步 又 如 下 ; 


[0 则 分 析 需 求 。 


根据 实际 效果 需要 创建 一 个 div 层 。 该 div 层 包含 三 部 分 : 一 个 是 左边 导航 栏 ， 中 间 图 片 
显示 区 域 ， 右 边 是 导航 栏 ， 然 后 使 用 CSS 颜色 设置 导航 栏 字体 和 边框。 


L@ 到 构建 HTML 页 面 ， 使 用 div 搭建 框架 。 


<!DOCTYPE html> 

<html > 

<head> 

<title> 淘 宝 网 </title> 

</head> 

<body> 

<div class="wrap"> 

<div class="area"> 

<diy > 

<div class="tab area"> 

<ul> 

<li class="current"><a href="#"> 男 T 恤 </a></1i> 
<1i ><a href="#"> 男 衬衫 </a></1i> 
<1i><a href="#"> 休 闲 裤 </a></1i> 
<1i><a href="#"> 牛 仔裤 </a></1i> 
<1i><a href="#"> 男 短裤 </a></1i> 
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<1i><a href="#"> 西 裤 </a></1i> 
<1i><a href="#"> 皮 鞋 </a></1i> 
<1i><a href="#"> 休 闲 鞋 </a></1i> 
<1i ><a href="#"> 男 凉鞋 </a></1i> 
</ul> 
</div> 
<div class="tab areal" > 
<ul> 
<1Li><a href="#"> 女 T 恤 </a></1i> 
<1i><a href="#"> 女 衬衫 </a></1i> 
<1i><a href="#"> 开 衫 </a></1i> 
<1i ><a href="#"> 女 裤 </a></1i> 
<1i><a href="#"> 女 包 </a></1i> 
<li ><a href="#"> 男 包 </a></1i> 
<1i ><a href="#"> 皮 带 </a></1i> 
<1i><a href="#"> 登 山 鞋 </a></1i> 
<1i ><a href="#"> 户 外 装 </a></1i> 
</ul> 
</div> 
</div> 
<div class="img area"> 
<img src=nantxu.jpg/> 
</div> 
</div> 
</body> 
</html> 


在 Firefox 62.0 中 浏览 效果 如 图 15-18 所 示 , 三 部 分 内 容 分 别 自 上 而 下 显示 , 第 一 部 分 是 导 
航 菜单 栏 ， 第 二 部 分 也 是 一 个 导航 菜单 栏 ， 第 三 部 分 是 一 个 图 片 信息 。 


PN、 


M 


{ 


图 15-18 基本 HIML 显示 
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08] 添加 CSS 代码 ， 修 饰 整体 样式 。 


<style type="text/css"> 
body, p, ul, li{margin:0; padding:0;} 
body{font:12px arial, 宋体, sans-serif;} 
-wrap{width:318px;height:248px; background-color:#FFFFFF; 
float:left;border: lpx solid #F27B04;} 
-area{width:318px; float:left;} 
.tab area{width:53px; height:248px; border-right:1px solid 
#F27B04;o0verflow:hidden; } 
.tab areal{width:53px; height:248px; border-left:1px solid 
#F27B04;o0verflow:hidden; position:absolute; left:265px; top:lpx; } 
.img areaf{ 
width:208px; 
height:248px; 
overflow:hidden; 
position:absolute; 
tOop: = 2DX> 
laft- 5p 
} 
</style> 


上 面 CSS 样式 代码 中 ， 设 置 了 body 页 面 字体 、 段 落 、 列 表 和 列表 选项 的 样式 。 需 要 注意 
的 是 ， 类 选择 器 tab_area 定义 了 左边 列表 选项 ， 即 左边 导航 菜单 ， 其 宽度 为 53 像素 ， 高 度 为 
248 像素 ， 边 框 色 为 黄色 。 类 选择 tab_areal 定义 右边 列表 选项 ， 即 右边 导航 菜单 ， 其 宽度 和 高 
度 与 左 侧 菜单 相同 ， 但 在 此 使 用 position 定义 了 这 个 div 层 显示 的 绝对 位 置 ， 语 句 为 
“position:absolute; left:265px: top:1px;”。 类 选择 器 img _area 定义 中 间 图 片 显 示 样 式 ， 也 是 使 
用 position 绝对 定位 。 

在 Firefox 62.0 中 浏览 效果 如 图 15-19 所 示 ， 可 以 看 到 显示 了 三 部 分 ， 左 右 两 侧 为 导航 菜 
单 栏 ， 中 间 是 图 片 。 


Se 
py 
js 
有 5 
时 
ee 


图 15-19 设置 整体 布局 样式 
人 @ 细 添加 CSS 代码 ， 修 饰 列表 选项 。 
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img{border:0;} 

li{list-style:none;} 

a{font-size:12px; text-decoration:none} 

a:link,a:visited {color:#999;} 

.tab area ul 1i,.tab areal ul 1i 

{width:53px;height:27px;text-align:center;line-height:26px; 
float:left;border-bottom:1lpx solid #F27B04;} 

.tab area ul li a,.tab areal ul li a{color:#3d3d3d;} 

.tab area ul li.current, .tab areal ul li.current{ height:27px; 
background-color:#F27B04;} 

.tab area ul li.current a,.tab areal ul li.current a{color:#fff; 
font-size:12px; font-weight:400; line-height:27px} 


上 面 CSS 样式 代码 ， 完 成 对 字体 大 小 、 颜 色 、 是 否 带 有 下 夯 线 等 属性 的 定义 。 
在 Firefox 62.0 中 浏览 效果 如 图 15-20 所 示 ， 可 以 看 到 网 页 中 左右 两 个 导航 菜单 栏 ， 相 对 
于 上 面 图 形 ， 字 体 颜 色 发 生 了 变化 ， 大 小 也 发 生 了 变化 。 


图 15-20 ”修饰 列表 选项 


15.6 专家 解 惑 


1. 如 何 理解 margin 的 加 倍 问 题 ? 

当 div 层 被 设置 为 float 时 ， 在 下 下 设置 的 margin 会 加 倍 ， 这 是 一 个 ie 都 存在 的 bug。] 
解决 办 法 是 ， 在 这 个 div 里 面 加 上 display:inline: 。 

例如 : 


人 慨 


<#div id="imfloat"></#DIV> 
相应 的 css 为 : 


#IamFloat{ 
float:left; 
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margin:5px; 
display:inline; 


} 

2. margin:0 auto 表示 什么 含义 ? 

margin:0 auto 定义 元 素 向 上 补 白 0 像素 ,左右 为 自动 使 用 。 这 样 按照 浏览 器 解析 习惯 是 可 
以 让 页 面 居中 显示 的 ， 一 般 这 个 语句 会 在 body 标记 中 。 在 使 用 margin:0 auto 语句 使 页 面 居中 
的 时 候 ， 一 定 要 给 元 素 一 个 高 度 并 且 不 要 让 元 素 浮动 ， 即 不 要 加 float， 否 则 效果 失效 。 
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使 用 CSS+DIV 页 面 排版 ， 已 经 逐步 替代 了 使 用 table 表 格 排版 ， 相 比较 table 表 格 ， 
DIV+CSS 页 面 排版 是 一 种 更 好 的 、 更 有 亲和力 的 、 更 灵活 的 ， 而 且 功能 更 强大 的 网 站 设计 
法 


16.1 CSS3 排版 概念 


DIV 在 CSS3+DIV 页 面 排版 中 是 一 个 块 的 概念 , DIV 的 起 始 标记 和 结束 标记 之 间 的 所 有 内 
容 都 是 用 来 构成 这 个 块 的 , 其 中 所 包含 元 素 特性 由 DIV 标记 属性 来 控制 , 或 者 是 通过 使 用 样式 
表格 式 化 这 个 块 来 进行 控制 。CSS3+DIV 页 面 排版 思想 是 首先 在 整体 上 进行 <div> 标 记 的 分 块 ， 
然后 对 各 个 块 进行 CSS 定位 ， 最 后 在 各 个 块 中 添加 相应 的 内 容 。 


16.1.1 将 页 面 用 DIV 分 块 


使 用 DIV+CSS 页 面 排版 布局 ， 需 要 对 网 页 有 一 个 整体 构思 ， 即 网 页 可 以 划分 几 个 部 分 。 
例如 上 中 下 结构 ， 还 是 左右 两 列 结构 ， 还 是 三 列 结构 。 这 时 就 可 以 根据 网 页 构思 ， 将 页 面 划分 
几 个 DIV 块 ， 用 来 存放 不 同 的 内 容 。 当 然 了 ， 大 块 中 还 可 以 存放 不 同 的 小 块 。 最 后 ,通过 CSS 
属性 ， 对 这 些 DIV 进行 定位 。 

在 现在 的 网 页 设计 中 ， 一般 情况 下 的 网 站 都 是 上 中 下 结构 ， 即 上 面 是 页 面 头 部 ， 中 间 是 页 
面 内 容 ， 最 下 面 是 页 脚 ， 整 个 上 中 下 结构 最 后 放 到 一 个 DIV 容器 中 ， 方 便 控 制 。 页 面 头 部 一 般 
用 来 存放 Logo 和 导航 菜单 ， 页 面 内 容 包 含 页 面 要 展示 的 信息 、 链 接 和 广告 等 ， 页 脚 存 放 的 是 
版 权 信 息 和 联系 方式 等 。 

将 上 中 下 结构 放置 到 一 个 DIV 容器 中 ， 方 便 后 面 排版 并 且 方 便 对 页 面 进 行 整 体 调整 ， 如 
图 16-1 所 示 。 
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整体 页 面容 器 


页 头 


页 面 主体 


页 脚 


图 16-1 上 中 下 页 面 结构 


16.1.2 设置 各 块 位 置 


复杂 的 网 页 布局 ， 不 是 单纯 的 一 种 结构 ， 而 是 包含 多 种 网 页 结构 。 例 如 总 体 上 是 上 中 下 ， 
中 间 内 分 为 两 列 布局 等 ， 如 图 16-2 所 示 。 


整体 页 面容 器 


页 面 主体 左 侧 页 面 主体 右 侧 


图 16-2 复杂 页 面 布局 


页 面 总 体 结构 确认 后 ， 一 般 情 况 下 ， 页 头 和 页 脚 变化 就 不 大 了 。 会 发 生变 化 的 ， 就 是 页 面 
主体 ， 此 时 需要 根据 页 面 展 示 的 内 容 ， 决 定 中 间 布 局 采用 什么 的 样式 ， 三 列 水 平分 布 还 是 两 列 
分 布 等 。 


16.1.3 用 CSS 定位 


页 面 版 式 确定 后 ， 就 可 以 利用 CSS 对 DIV 进行 定位 ， 使 其 在 指定 位 置 出 现 ， 从 而 实现 对 
页 面 的 整体 规划 。 然 后 再 向 各 个 页 面 添加 内 容 。 

本 节 将 以 图 16-2 为 实现 蓝图 ， 创 建 一 个 总 体 为 上 中 下 布局 ， 页 面 主体 布局 为 左右 布局 的 
页 面 的 CSS 定位 实例 。 


【 例 16.1】 (实例 文件 : ch16\16.1.html) 


1. 创建 HTML 页 面 ， 使 用 DIV 构建 层 
首先 构建 HTML 网 页 ， 使 用 DIV 划分 最 基本 的 布局 块 。 其 代码 如 下 : 
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<!DOCTYPE html> 

<html> 

<head> 
<title>CSss 排 版 </title><body> 
<div id="container"> 

<div id="banner"> 页 面 头 部 </div> 
<div id=content > 

<div id="right"> 

页 面 主体 右 侧 

</div> 

<div id="left"> 

页 面 主体 左 侧 

</div> 

</div> 

<div id="footer"> 页 脚 </div> 
</div> 

</body> 

</html> 


上 面 代码 中 ， 创 建 了 5 个 层 ， 其 中 ID 名 称 为 container 的 div 层 ， 是 一 个 布局 容器 ， 即 所 
有 的 页 面 结构 和 内 容 都 是 在 这 个 容器 内 实现 ;名 称 为 banner 的 div 层 ,是 页 头 部 分 ;名 称 为 footer 
的 div 层 , 是 页 脚 部 分 。 名 称 为 content 的 div 层 , 是 中 间 主 体 , 该 层 包 含 了 两 个 层 , 一 个 是 right 
层 ， 一 个 left 层 ， 分 别 放置 不 同 的 内 容 。 

在 正 11.0 中 浏览 效果 如 图 16-3 所 示 ， 可 以 看 到 中 显示 了 这 几 个 层 ， 从 上 到 下 一 次 排列 。 


一 口 x 
剖 ”D:\ 本 书 源 代码 \code\c 国 ”搜索 .… 

Css 排 版 x 

竟 当 百 度 一 下 ,你 就 知道 

页 面 头 部 

页 面 主体 右 侧 

页 面 主体 左 侧 

页 膨 


图 16-3 创建 div 层 


2. CSS 设置 网 页 整体 样式 


然后 需要 对 body 标记 和 container 层 〈 布 局 容器 ) 进行 CSS 修饰 ， 从 而 对 整体 样式 进行 定 
义 。 代 码 如 下 所 示 。 


<style type="text/css"> 
body { 
margin:0px; 
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font-size:16px; 

font-family:" 幼 圆 ";} 
#containert{ 

position:relative; 

width:100%;} 
</style> 


上 面 代码 只 是 设置 了 文字 大 小 、 字 体 类 型 、 布 局 容器 container 的 宽度 、 层 定位 方式 ,布局 
容器 撑 满 整个 浏览 器 。 

在 下 11.0 中 浏览 效果 如 图 16-4 所 示 , 可 以 看 到 此 时 相 比较 上 一 个 显示 页 面 , 发 生 的 变化 不 大 ， 
只 不 过 字体 类 型 和 字体 大 小 发 生变 化 ， 因 为 container 没有 带 有 边框 和 背景 色 无 法 显示 该 层 。 


和 口 x 
着 ”D:\ 本 书 源 代码 \code\c 图 ~ 中 搜索. 
碟 Css 排 版 x 四 
商洛 百度 一 下 ， 你 就 知道 
页 面 头 部 
页 面 主体 右 侧 
页 面 主体 左 侧 
页 脚 


图 16-4 设置 全 局 CSS 样式 


3. CSS 定义 页 头 部 分 
接 下 来 就 可 以 使 用 CSS 对 页 头 进行 定位 ， 即 banner 层 ， 使 其 在 网 页 上 显示 。 代 码 如 下 : 
#bannert{ 
height:80px; 
border:1px solid #000000; 
text-align:center; 
background-color:#a2d9ff; 
padding:10px; 
margin-bottom: 2px;} 
上 面 首先 设置 了 banner 层 的 高 度 为 80 像素 ， 宽 度 充满 整个 container 布局 容器 ， 下 面 分 别 
设置 了 边框 样式 、 字 体 对 齐 方式 、 背 景色 、 内 边 距 和 外 边 距 的 底部 等 。 
在 正 11.0 中 浏览 效果 如 图 16-5 所 示 ， 可 以 看 到 在 页 面 顶 部 显示 了 一 个 浅 绿色 的 边框 ， 边 
框 充满 整个 浏览 器 ， 边 框 中 间 显 示 了 一 个 “页 面 头 部 ”的 文本 信息 。 
4. CSS 定义 页 面 主体 
在 页 面 主体 如 果 两 个 层 并 列 显示 ， 需 要 使 用 float 属性 ， 将 一 个 层 设 置 到 左边 ， 一 个 层 设 
置 到 右边 。 其 代码 如 下 : 


HTML54CSS3+jQuery Mobilet+Bootstrap 开发 APP 从 入 门 到 精通 〈 视 频 教 学 版 ) 


#right{ 
ELloat :rightEs 
text-align:center; 
width:80%; 
borqer:1px solid #ddeecc; 
margin-left:1px; 
height:200px; } 
#1left{ 
float:left; 
width:19%; 
border:lpx solid #000000; 
text-align:center; 
height:200px; 
background-color:#bcbcbc;} 


上 面 代码 设置 了 这 两 个 层 的 宽带 ，right 层 占有 空间 的 80%，left 层 占 有 空间 的 19%， 并 分 
别 设置 了 两 个 层 的 边框 样式 ， 对 齐 方式 ， 背 景色 等 。 

在 正 11.0 中 浏览 效果 如 图 16-6 所 示 ， 可 以 看 到 页 面 主体 部 分 ， 分 为 两 个 层 并 列 显示 ， 左 
边 背 景色 为 灰色 ， 占 用 空间 较 小 ， 右 侧 背 景色 为 白色 ， 占 用 空间 较 大 。 
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大 css 排版 x 回 | 


| 育 EEE 一下 , 全 


页 面 主体 右 侧 


图 16-5 CSS 设置 页 头 图 16-6 CSS 定位 中 间 主 体 


5. CSS 定义 页 脚 
最 后 需要 设置 页 脚 部 分 ， 页 脚 一 般 在 主体 的 下 面 。 因 为 页 面 主体 中 使 用 了 float 属性 设置 
层 浮动 ， 所 以 需要 在 页 脚 层 设置 clear 属性 ， 使 其 不 受 浮动 的 影响 。 代 码 如 下 : 


#footer{ 
clear:both; /* 不 受 float 影 响 */ 
text-align:center; 
height:30px; 
border:1lpx solid #000000; 
background-color:#ddeecc; 
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} 


上 面 代码 设置 页 脚 对 齐 方式 、 高 度 、 边 框 和 背景 色 等 。 在 正 11.0 中 浏览 效果 如 图 16-7 所 
示 ， 可 以 看 到 页 面 底部 显示 了 一 个 边框 ， 背 景色 味 浅 绿色 ， 边 框 充满 整个 DIV 布局 容器 。 


页 面 主体 右 侧 


图 16-7 CSS 定义 页 脚 


16.2 国定 宽度 布局 


在 进行 网 页 设计 时 ， 不 得 不 考虑 网 页 布局 宽度 ， 因 为 浏览 者 会 使 用 大 小 不 同 的 浏览 器 查看 
页 面 ， 设 计 宽 度 过 大 ， 有 的 浏览 器 就 不 能 完全 显示 出 来 ， 设 计 宽度 过 小 ， 显 示 内 容 就 不 能 完成 
显示 并 容易 出 现 滚动 条 。 


16.2.1 上 中 下 版 式 

网 页 开发 过 程 中 ， 有 几 种 比较 经 典 的 网 页 排版 方式 ， 包 括 宽度 固定 的 上 中 下 版 式 、 宽 度 固 
定 的 左右 版 式 、 自 适应 宽度 布局 和 浮动 布局 等 。 这 些 版 式 会 经 常 在 网 页 设计 时 出 现 ， 并 且 经 常 
被 用 到 各 种 类 型 的 网 站 开发 中 。 

宽度 固定 的 上 中 下 版 式 布 局 应 用 非常 广泛 。 但 其 一 般 用 在 简单 信息 介绍 上 ， 而 不 用 在 网 站 
首页 上 。 这 种 版 式 布局 简单 ， 包 含 信息 较 少 。 


【 例 16.2】〔 实 例文 件 : ch16\16.2.html) 


1. 创建 HTML 网 页 ， 使 用 div 层 构 建 块 
首先 需要 使 用 DIV 块 对 页 面 区 域 进行 划分 ， 使 其 符合 如 图 16-8 的 页 面 布局 。 基 本 代 
码 如 下 : 
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<!DOCTYPE html> 

<html> 

<head> 

<title> 上 中 下 排版 </title> 

</head> 

<body> 

<div class="big"> 

<div class="up"> 

<p><a href="#"> 首 页 </a><a href="#"> 环 保 扫描 </a><a href="#"> 环 保科 技 </a><a 
href="#"> 低 碳 经 济 </a><a href="#"> 土 壤 绿 化 </a></p> 

</div> 

<div class="middle"> 

<Bbr /> 

<h1> 拒 绝 使 用 一 次 性 用 品 </h1> 

<p> 在 现代 社会 生活 中 ， 商 品 的 废弃 和 任意 处 理 是 普遍 的 ， 特 别 是 一 次 性 物品 使 用 激增 。 据 统计 ， 
英国 人 每 年 抛弃 25 亿 块 尿 布 ; …. . </p> 

</div> 

<div class="down"><br /> 

<p><a href="#"> 关 于 我 们 </a> | <a href="#"> 免 责 声明 </a> | <a href="#"> 联 系 我 
们 </a> | <a href="#"> 生 态 中 国 </a> | <a href="#"> 联 系 我 们 </a></p> 

<p>2018 &copy; 世界 环保 联合 会 郑州 办 事 处 技术 支持 </p> 

</div> 

</div> 

</body> 

</html> 


上 面 代码 创建 了 4 个 层 ， 层 big 是 DIV 布局 容器 ， 用 来 存放 其 他 的 DIV 块 。 层 up 表示 页 
头 部 分 ， 层 middle 表示 页 面 主体 ， 层 down 表示 页 脚 部 分 。 

在 正 11.0 中 浏览 效果 如 图 16-8 所 示 ， 可 以 看 到 页 面 显 示 了 三 个 区 域 信息 ， 顶 部 显示 的 是 
超级 链接 部 分 ， 中 间 显 示 的 是 段落 信息 ， 底 部 显示 的 地 址 和 版 权 信息 。 
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拒绝 使 用 一 次 性 用 品 


废弃 和 任意 处 理 是 兰 忆 的 ， 特 别 是 一 
日 本 人 每 名 处 


关于 我 们 | 免责 声明 | 联系 我 们 | 生态 中 国 | 蜂 系 我 们 
2018 © 世界 环保 联合 会 郑州 办 事 处 技术 支持 


图 16-8 实现 DIV 块 
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2. 使 用 CSS 定义 整体 


让 


页 面 显 示 时 ， 字 体 样式 非常 丑陋 ， 布 局 不 合理 。 此 时 需要 使 用 CSS 代码 ， 对 页 面 整 


体 样式 ， 进 行 修饰 。 代 码 如 下 : 


<style> 


| 


padding:0px; 
margin:0px; 


} 


bodyl{ 

font-family:" 幼 圆 "; 
font-size:12px; 
color:green; 


} 


.big{ 
width:900px; 
margin:0 auto 0 auto; 


} 


</style> 


上 面 代码 定义 了 页 面 整体 样式 ， 例 如 字体 类 型 为 幼 圆 ， 字 体 大 小 为 12 像素 ， 字 体 颜色 为 
绿色 ， 布 局 容器 big 的 宽带 为 900 像素 。“margin:0 auto 0 auto” 语 句 表示 该 块 与 页 面 的 上 下 边 
界 为 0， 左 右 自动 调整 。 

在 正 11.0 中 浏览 效果 如 图 16-9 所 示 ， 可 以 看 到 页 面 字体 变 小 ， 字 体 颜 色 为 绿色 ， 并 充满 
整个 页 面 ， 页 面 宽度 为 900 像素 。 


大 量 的 
巨大 的 。， 
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图 16-9 定义 整体 样式 


3. 使 用 CSS 定义 页 头 部 分 


下 i 


-up 


就 可 以 使 用 CSS 定义 页 头 部 分 ， 即 导航 菜单 。 代 码 如 下 : 


width:900px; 
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height:100px; 
background-image:url (17.jpg); 
background-repeat :no-repeat; 


} 


在 类 选择 器 up 中 ，CSS 定义 层 的 宽度 和 高 度 ， 其 宽度 为 900 像素 ， 并 定义 了 背景 图 片 。 
在 正 11.0 中 浏览 效果 如 图 16-10 所 示 ， 可 以 看 到 页 面 顶 部 显示 了 一 个 背景 图 ， 并 且 超 级 
链接 以 一 定 距 离 显 示 ， 以 绝对 定位 方式 在 页 头 显示 。 


© DAEHRKNodewhIGA62html 国 - 6 天 只 -| 1 © 
S Lh Tg x 轿 
将 EE- 下 , rE 


Bm ran 一 一 | 
拒绝 使 用 一 次 性 用 品 


套现 代 让 会 生 活 中 ， 商 品 的 区 开 可 任 剖 外 
的 ”一 次 性 玫 甩 ， 白 本 的 公司 多 可 分 守 百 万 
得 
入 


的 可 革 之 时，3.5 亿 个 六 队 ， 和 
有 加 
大 的 ， 不 代沟 芝 亿 的 汪 茵 ,条 县 产 a 


关于 拔 中 | 录 机 归 | 联系 我 们 | 生 玛 中 国 | 导 素 让 
018 6 世界 环 训 卫 针 宇 那州 办事 处 技术 禄 条 


图 16-10 CSS 修饰 页 头 


4. 使 用 CSS 定义 页 面 主体 
下 面 需 要 使 用 CSS 定义 页 面 主体 ， 即 定义 层 和 段落 信息 。 代 码 如 下 : 


.middlef{ 

border:1px #ddeecc solid; 

margin-top:10px; 

| 

在 类 选择 器 middle 中 , 定义 了 边框 样式 , 和 内 边 距 距离 , 此 处 层 的 宽度 和 big 层 宽度 一 致 。 
在 正 11.0 中 浏览 效果 如 图 16-11 所 示 ， 可 以 看 到 中 间 部 分 以 边框 形式 显示 ， 标 题 居中 显 


示 ， 段 落 缩 进 两 个 字符 显示 。 
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图 16-11 CSS 定义 中 间 部 分 
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5. 使 用 CSS 定义 页 脚 部 分 
定义 页 脚 部 分 代码 如 下 : 
.down{ 
background-color:#CCCCCC; 
height:80px; 


text-align:center; 


} 


上 面 代码 中 ， 类 选择 器 down 定义 了 背景 颜色 ， 高 度 和 对 齐 方 式 。 其 他 选择 器 定义 超级 链 
接 的 样式 。 

在 焉 11.0 中 浏览 效果 如 图 16-12 所 示 ， 可 以 看 到 页 面 底部 显示 了 一 个 灰色 矩形 框 ， 其 版 
权 信息 和 地 址 信息 居中 显示 。 


图 16-12 设置 页 脚 部 分 


从 上 面 的 效果 可 以 看 到 ， 这 个 页 面 一 共 分 为 三 个 部 分 ， 第 一 部 分 包含 图 片 和 菜单 栏 ， 这 一 
部 分 放 到 页 头 ， 是 上 中 下 版 式 的 “上 ”。 第 二 个 部 分 是 中 间 的 内 容 部 分 ， 即 页 面 主体 ， 用 于 存 
放 要 显示 的 文本 信息 ， 是 上 中 下 版 式 的 “中 ”， 第 三 个 部 分 是 页 面 底部 ， 包 含 地 址 和 版 权 信息 
的 页 脚 ， 是 上 中 下 版 式 的 “下 ”。 


16.2.2 ”左右 版 式 


在 页 面 排版 中 ， 有 时 会 根据 内 容 需 要 页 面 主体 分 为 左右 两 个 部 分 显示 ， 用 来 存放 不 同 的 信 
息 内 容 。 实 际 上 上 这 也 是 一 种 宽度 固定 的 版 式 。 
下 面 实例 的 框架 大 体 上 也 是 上 中 下 结构 ， 只 不 过 页 面 主体 部 分 又 分 了 左右 版 式 。 


【 例 16.3】 (实例 文件 : ch16\16.3.html) 


1. 创建 HTML 网 页 ， 使 用 DIV 构建 块 
在 HIML 页 面 , 将 DIV 框架 和 所 要 显示 的 内 容 显 示 出 来 , 并 将 要 引用 的 样式 名 称 定义 好 。 
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代码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<title> 茶 网 </title> 
</head> 
<body> 
<div id="container"> 
<div id="banner"> 
<img src="b.jpg" border="0"> 
</div> 
<div id="links"> 
<ul> 
<1i> 首 页 </1i> 
<1i> 茶 业 动态 </1i> 
<1i> 名 茶 荟 萃 </1i> 
<1i> 茶 与 文化 </1i> 
<1i> 茶 艺 茶道 </1i> 
<1i> 鉴 茶 品 茶 </1i> 
<1i> 茶 与 健康 </1i> 
<1i> 茶 语 清心 </1i> 
</ul> <br /> 
</div> 
<div id="leftbar"> 
<p class="lefttitle"> 名 人 与 茶 </p> 
<p> .三 文 鱼 茶 泡饭 </p> 
<p> . 董 小 宛 的 茶 泡饭 </p> 
<p> .人生 百味 一 芒 茶 </p> 
<p> .我 家 的 茶 事 </p> 
<p class="]lefttitle"> 茶 事 掌故 </p> 
<p>.“ 峨 眉 雪 芽 ” 的 由 来 </p> 
<p> . 茶 文化 的 养生 术 </p> 
<p> . 老 北 京 的 花茶 </p> 
<p> .古代 洗 茶 的 原因 和 来 历 </p> 
</div> 
<div id="content"> 
<h4> 人 生 茶 境 </h4> 
<p>“ 喝 茶 当 于 瓦 纸 窗 下 ， 清 泉 绿茶 ， 用 素雅 的 陶瓷 茶具 ， 同 二 三 人 共 饮 ， 得 半日 之 闲 ， 可 抵 
十 年 的 侍 梦 。”</p> 
<p> 对 中 国人 来 说 ，“ 茶 ”是 一 个 温暖 的 字 。.…………….</p> 
</div> 
<div id="footer"> 版 权 所 有 2018.08.12</div> 
</div> 
</body> 
</html> 


上 面 代码 定义 了 几 个 层 ， 用 来 构建 页 面 布局 。 其 中 层 container 作为 布局 容器 ，banner 作为 
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页 面 图 形 logo，links 层 作为 页 面 导航 ,leftbar 层 作为 左 侧 内 容 部 分 ，content 层 作为 右 侧 内 容 部 
分 ，footer 层 作为 页 脚 部 分 。 

在 正 11.0 中 浏览 效果 如 图 16-13 所 示 ， 可 以 看 到 页 面 上 部 显示 了 一 张 图 片 ， 下 面 是 超级 
链接 、 段 落 信息 ， 最 后 是 地 址 信息 等 。 


同 “DA 下 书 大 fcodeych16M16.3.html 国 "| 扫 示 DP-: 晤 
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图 16-13 div 层 构建 布局 样式 


2. CSS 定义 页 面 整体 样式 
首先 需要 定义 整体 样式 ， 例 如 网 页 中 字体 类 型 或 对 齐 方 式 等 。 代 码 如 下 : 


<style> 

body, html{ 
margin:0px; padding:0px; 
text-align:center; 

} 

#container{ 
position: relative; 
margin: 0 auto; 
padding:0px; 
width:700px; 
text-align: left;} 

</style> 


上 面 代码 中 , 类 选择 器 container 定义 了 布局 容器 的 定位 方式 为 相对 定位 , 宽度 为 700 像素 ， 
文本 左 对 齐 ， 内 外 边 距 都 为 0 像素 。 
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3. CSS 定义 页 头 部 分 
此 网 页 的 页 头 包含 两 部 分 : 一 个 是 页 面 logo; 另 一 个 是 页 面 的 导航 菜单 。 定 义 这 两 个 层 
CSS 代码 如 下 : 


#banner{ 
margin:0px; padding:0px; 


} 
#1links{ 
font-size:12px; 
margin:-18px Opx Opx Opx; 
padding:0px; 
position:relative; 
上} 
#1links uli{ 
list-style-type:none; 
padding:0px; margin:0px; 
width:700px; 
| 
#1links ul 1if{ 
text-align:center; 
width:80px; 
display:block; 
float:left; 
color:#ddeecc; 
} 
#1links brf{ 
display:none; 


} 


上 面 代 码 中 , ID 选择 器 banner 定义 了 内 外 边 距 都 是 0 像素 , ID 选择 器 links 定义 了 导航 菜 
单 的 样式 ， 例 如 字体 大 小 为 12 像素 ， 定 位 方式 为 相对 定位 等 。 

在 下 11.0 中 浏览 效果 如 图 16-14 所 示 ， 可 以 看 到 页 面 导航 部 分 在 图 像 上 显示 ， 并 且 每 个 
菜单 相隔 一 定 距离 。 


人 生 百味 - 雪 革 
-和 的 于 

某 吉 半 术 

“二 革 ”多 生来 


学 当 天 曾 下 ， 清 条 绎 条 用 于 的 隐 妆 芝 具 ， 同 二 人 闪 移 。 得 站 昌之 用 ， 可 亲 二 年 的 全 


的 字 。 


图 16-14 定义 页 头 部 分 
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4. CSS 定义 页 面 主体 左 侧 部 分 
使 用 CSS 代码 定义 页 面 主体 左 侧 部 分 。 


#1leftbart{ 
background-color:#d2e7ff; 
text-align:center; 
font-size:12px; 
width:150px; 

float:left; 
padding-top:0px; 
padding-bottom:30px; 
margin:0px; 

} 

#leftbar pt{ 

padding-left:12px; 

padding-right:12px; 
text-align:left; 

} 

.lefttitlef{ 

background-color:green; 

border:1px solid #ddeecc; 
| 


上 面 选择 器 leftbar 中 ， 定 义 了 层 背景 色 、 对 齐 方式 、 字 体 大 小 和 左 侧 div 层 的 宽度 ， 这 里 
使 用 float 定义 层 在 水 平方 向 上 浮动 定位 。 

在 下 11.0 中 浏览 效果 如 图 16-15 所 示 ， 可 以 看 到 页 面 左 侧 部 分 以 矩形 框 显 示 ， 包 含 了 一 
些 简 单 的 页 面 导航 。 


Or Tr 了 万 - 3 
局 5 > 
部 


人 
ne 
EH 
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图 16-15 CSS 定义 页 面 左 侧 


5. CSS 定义 页 面 主体 右 侧 部 分 
使 用 CSS 代码 定义 页 面 主体 右 侧 部 分 。 
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#content{ 
font-size:12px; 
loat=-left> 
width:550px; 
padding:5px 0px 30px Opx; 
margin:0px; 
} 
#content p, #content h4{ 
padding-left:20px; 
padding-right:15px; 
text-indent:2em; 
} 
h41{ 
text-decoration:underline; 
color:#0078aa; 
padding-top:15px; 
font-size:16px; 


} 


代码 中 ID 选择 器 content， 用 来 定义 字体 大 小 、 右 侧 div 层 宽 度 ， 内 外 边 距 等 。 在 IE 11.0 
中 浏览 效果 如 图 16-16 所 示 ， 可 以 看 到 右 侧 部 分 的 段落 字体 变 小 ， 段 落 缩 进 了 两 个 单元 格 。 


© ONSEN\code\ch1O1G 3 heml 


国 "号 | mx. 


|S #m 
训 和 下 ,fim508 


三 次 鲁 苇 沪 亿 
“至 小 更 的 条 丧生 
人 生 百味 一 站 等 
我 家 的 条 本 
Ls 
"上 局 十” 的 出 下 
， 芝 文化 的 庆生 术 


人 
机 浙 权 所 有 2018. 08. 12 
,二 代 潜 某 的 哲 固 和 坟 历 


图 16-16 定义 右 侧 内 容 


6. CSS 定义 页 脚 部 分 


如 果 上 面 的 层 使 用 了 浮动 定位 ， 那 么 页 脚 一 般 需 要 使 


码 如 下 : 


#footert{ 
clear:both; 
font-size:12px; 


clear 去 掉 浮动 所 带 来 的 影响 。 代 
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width:100%; 

padding:3px 0px 3px Opx; 
text-align:center; 
margin:0px; 
background-color:#b0cfff; 


footer 选择 器 中 ， 定 义 了 层 的 宽度 ， 即 充满 整个 布局 容器 ， 字 体 大 小 为 12 像素 ， 居 中 对 齐 
和 背景 色 。 在 正 11.0 中 浏览 效果 如 图 16-17 所 示 ， 可 以 看 到 页 脚 显示 了 一 个 矩形 框 ， 背 景色 为 


浅 蓝 色 ， 拢 形 框 内 显示 了 版 权 信息 。 


三 文生 革 稚 浙 
.村 小 亢 的 茶 少 恒 
人 生 百 蚊 一 得 笠 
,我 家 的 菜 训 
[ 
“民情 亚 芽 ” 的 由 让 上 


， 共 文化 的 养生 水 
, 老 北 京 的 花 茜 
,古代 潜 革 的 原 固 和亲 


全 役所 和 2015.03.12 


图 16-17 定义 页 脚 


16.3 新 增 CSS3 多 列 布局 


在 CSS3 没有 出 来 之 前 ， 网 页 设计 者 如 果 要 设计 多 列 布局 ， 不 外 乎 有 两 种 方式 ， 一 种 是 浮 
动 布局 ， 另 一 种 是 定位 布局 。 浮 动 布局 比较 灵活 ， 但 容易 发 生 错位 ， 这 是 需要 添加 大 量 的 附加 
代码 或 无 用 的 换行 标记 ， 增 加 了 不 必要 的 工作 量 。 定 位 布局 可 以 精确 的 确定 位 置 ， 不 会 发 生 错 
位 ， 但 无 法 满足 模块 的 适应 能 力 。 为 了 解决 多 列 布局 的 难题 ，CSS3 新 增 了 多 列 自 动 布局 。 


16.3.1 列 宽度 column-width 


在 CSS3 中 ， 可 以 使 用 column-width 属性 定义 多 列 布局 中 每 列 的 宽度 ， 可 以 单独 使 


可 以 和 其 他 多 列 布局 属性 组 合 使 用 。 
column-width 语法 格式 如 下 : 


column-width: [<length> | auto] 


区 
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其 中 属性 值 <length> 是 由 浮 点 数 和 单位 标识 符 组 成 的 长 度 值 ， 不 可 为 负 值 。auto 根据 浏览 
器 计算 值 自动 设置 。 


【 例 16.4】〔 实 例文 件 : ch16\16.4.html) 


<!DOCTYPE html> 
<html> 
<head> 
<title> 多 列 布局 属性 </title> 
<style> 
body{ 
-moz-column-width:300px; /* 兼 容 Webkit 引 擎 ， 指 定 列 宽 是 300 像 素 */ 
column-width:300px; /*CSS3 标 准 化 指定 列 宽 是 300 像 素 */ 
} 
hi{ 
Color:#333333; 
background-color:#DCDCDC; 
padding:5px 8px; 
font-size:20px; 
text-align:center; 
padding:12px; 
} 
h2{ 
font-size:16px;text-align:center; 
} 
p{color:#333333;font-size:14px;line-height:180%;text-indent :2em;} 
</style> 
</head> 
<body> 
<h1> 春 </h1> 
<h2> 朱 自 清 </h2> 
<p> 盼 望 着 ， 盼 望 着 ， 东 风 来 了 ， 春 天 的 脚步 近 了 。</p> 
<p> 一 切 都 像 刚 睡 醒 的 样子 ， 欣 欣然 张 开 了 眼 。 山 朗 润 起 来 了 ， 水 涨 起 来 了 ， 太 阳 的 脸红 起 来 了 。 
</p> 
<p> 小 草 偷偷 地 从 土 里 钻 出 来 ， 嫩 嫩 的 ， 绿 绿 的 。 园 子 里 ， 田 野 里 ， 瞧 去 ， 一 大 片 一 大 片 满 是 的 。 
坐 着 ， 躺 着 ， 打 两 个 滚 ， 踢 几 脚 球 ， 赛 几 趟 跑 ， 捉 几 回 迷 藏 。 风 轻 悄悄 的 ， 草 软 绵绵 的 。</P>…- 
</body> 
</html> 


在 上 面 代码 body 标记 选择 器 中 ， 使 用 column-width 指定 了 要 显示 的 多 列 布局 的 每 列 的 宽 
带 。 下 面 分 别 定义 标题 hl、h3 和 段落 p 的 样式 ， 例 如 字体 大 小 、 字 体 颜色 、 行 高 和 对 齐 方式 
等 。 

在 正 11.0 中 浏览 效果 如 图 16-18 所 示 ， 可 以 看 到 页 面 文章 分 为 两 列 显示 ， 列 宽 相 同 。 
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寻 本 根 ， 驻 儿 将 昌 安 在 繁花 澳 叶 当中 ， 高 兴起 来 了 ， 呈 及 引 健 地 雪 弄 洁 胜 
春 的 叭 陀 ， 员 出 宛 转 的 曲子 ， 跟 经 风流 水 应 和 着 。 牛 背 上 牧 至 的 短 第 ， 这 时 
人 也 成 天 在 吧 记 地 响 着 
朱自清 
pe _ -下 并 是 三 两 天 。 可 别 集 。 看 ， 像 牛 志 ， 像 检 针 ， 像 
tt ti 细 比 ， 密 窗 地 全 识 着 ， 人 家 层 硕 上 全 第 着 一 屋 薄 姻 。 材 叶 儿 却 绿 得 发 这 
一 急 痢 像 刚 睡 硬 的 祥子 ， 欣 欣然 基 开 了 跟 。 山 朗 润 起 来 了 ， 水 素 也 青 等 如 你 的 跟 。 伤 关 村 候 ， 上 灯 了 ， 一 点 点 黄 恒 的 光 ， 烘 托 出 一 片 
起 来 了 ， 太 阳 的 脸红 起 来 了 。 这 安 秀 而 和 平 的 夜 。 在 乡下 ， 小 路 上 ， 石 桥 边 ， 有 迭起 伞 慢 慢 走 省 的 人 ， 
还 有 地 里 工作 的 的 章 层 ， 夭 入 项 的 ， 在 十 引 
小 草丛 从 地 从 十 里 引 出 来 ， 坟 的 ， 绿 扣 的 。 园 地 笃 ， 田 可 里， 。 匣 东 着 。 人 
大 片 一 大 片 请 是 的 。 内 着 ， 躺 着 ， 打 两 个 形 ， 唱 几 隐 球 ， 赛 几 盾 。 户 ， 老 老 小 小 ， 也 直 赵 儿 似 的 ， 一 个 个 都 出 来 了 。 订 活 好 活 入 髓 ， 持 措 拉 
性 ， 氟 几 回 迷 茂 。 风 轻 情 情 的 ， 草 软 纺 绵 的 。 一 精神 ， 各 做 各 的 一 份 儿 事 去 ， “年 之 计 在 于 春 ”; 几 起 头 儿 ， 有 的 是 
工夫 ， 有 的 是 希望 


瞧 去 


桃 树 、 奋 树 、 梨 树 ， 你 不 
像 火 ， 粕 的 像 焉 ， 白 的 像 要 。 花 里 带 
花 下 成 干 成 百 的 蜜蜂 哈 : 
儿 ， 有 名 字 的 ， 没 名 字 的 ， 
贱 ， 像 旺旺， 还 多 呀 胰 的 。 


春天 像 刚 落地 的 娃娃 ， 从 头 到 甩 都 是 新 的 ， 它 生长 着 。 


， 花 枝 招展 的 ， 笑 着 ， 走 着 。 


“ 歇 面 不 察 杨 覆 风 ”， 不 错 的 ， 像 
翻 的 泥土 的 气息 ， 泥 着 青草 味 儿 ， 还 有 


春天 像 健壮 | 


下 ， 有 铁 一 般 的 胸 生 和 吸 购 ， 他 倒 关 我们 


图 16-18 ”设置 列 宽 


16.3.2 ” 列 数 column-count 


在 CSS3 中 ， 可 以 直接 使 用 column-count 指定 多 列 布局 的 列 数 ， 而 不 需要 通过 列 宽度 自动 
调整 列 数 。 
column-count 语法 格式 如 下 : 


column-count: auto | <integer> 


上 面 属性 值 <integer> 表 示 值 是 一 个 整数 ， 用 于 定义 栏目 的 列 数 ， 取 值 为 大 于 0 的 整数 。 不 
可 以 为 负 值 。auto 属性 值 表示 根据 浏览 器 计算 值 自动 设置 。 


【 例 16.5】〔 实 例文 件 : ch16\16.5.html) 


<!DOCTYPE html> 
<html> 
<head> 
<title> 多 列 布局 属性 </title> 
<style> 
body{ 

-moz-column-count :3;/*Webkit 引 擎 定义 多 列 布局 列 数 */ 

column-count:3; /*CSS3 标 准 定义 多 列 布局 列 数 */ 
} 
hif{ 

color:#333333; 
background-color:#DCDCDC; 
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padding:5px 8px; 

font-size:20px; 

text-align:center; 

padding:12px; 
站 
h2{ 

font-size:16px;text-align:center; 
} 
p{color:#333333;font-size:14px;line-height:180%;text-indent :2em;} 
</style> 
</head> 
<body> 
<h1> 春 </h1> 
<h2> 朱 自 清 </h2> 
<p> 盼 望 着 盼望 着 ， 东 风 来 了 ， 春 天 的 脚步 近 了 。</p> 
<P> 一 切 都 像 刚 睡 醒 的 样子 ， 欣 欣然 张 开 了 眼 。 山 朗 润 起 来 了 ， 水 涨 起 来 了 ， 太 阳 的 脸红 起 来 了 。 
</p> 
<P> 人 小 草 偷偷 地 从 土 里 钻 出 来 ， 嫩 嫩 的 ， 绿 绿 的 。 园 子 里 ， 田 野 里 ， 瞧 去 ， 一 大 片 一 大 片 满 是 的 。 
坐 着 ， 躺 着 ， 打 两 个 滚 ， 踢 几 脚 球 ， 赛 几 趟 跑 ， 捉 几 回 迷 藏 。 风 轻 悄悄 的 ， 草 软 绵绵 的 。 

SN 
</body> 
</html> 


上 面 的 CSS 代码 除了 column-count 属性 设置 外 ， 其 他 样式 属性 和 上 一 个 例子 基本 相同 ， 
就 不 介绍 了 。 

在 正 11.0 中 浏览 效果 如 图 16-19 所 示 ， 可 以 看 到 页 面 根据 指定 的 情况 ， 显 示 了 三 列 布局 ， 
其 布局 宽度 由 浏览 器 自动 调整 。 


Div- ode\eh16\E S hrml -0 a 请 -| 从 E99 
局 于 0 司 加 性 x 桓 


EEL 


大 天 像 小 寻 媳 ， 论 枝 招展 的 


笑 荐 ， 直 着。 


上 春天 你 健 入 的 吉 年 ， 有 铁 一 般 的 用 呈 和 醒 网 ， 他 上 兰 我 们 
乡 上 前 二 


图 16-19 设置 列 数 


16.3.3” 列 间距 column-gap 
多 列 布局 中 ， 可 以 根据 内 容 和 喜好 的 不 同 ， 调 整 多 列 布局 中 列 之 间 的 距离 ， 从 而 完成 整体 
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版 式 规划 。 在 CSS3 中 ，column-gap 属性 用 于 定义 两 列 之 间 的 间距 。 
column-gap 语法 格式 如 下 : 


column-gap: normal | <length> 


其 中 属性 值 normal 表示 根据 浏览 器 默认 设置 进行 解析 ， 一 般 为 lem; 属性 值 <length> 表 示 
值 由 浮 点 数 和 单位 标识 符 组 成 的 长 度 值 ， 不 可 为 负 值 。 


【 例 16.6】〔 实 例文 件 ，ch16\16.6.html) 


<!DOCTYPE html> 
<html> 
<head> 
<title> 多 列 布局 属性 </title> 
<style> 
body{ 
-moz-column-count:3; /*Webkit 引 擎 定义 多 列 布局 列 数 */ 
column-count:3; /*CSS3 定 义 多 列 布局 列 数 */ 
-moz-column-gap:3em; /*Webkit 引 擎 定义 多 列 布局 列 间距 */ 
column-gap:3em; /*CSS3 定 义 多 列 布局 列 间 距 */ 
line-height:2.5em; 
} 
hi{ 
color:#333333; 
background-color:#DCDCDC; 
padding:5px 8px; 
font-size:20px; 
text-align:center; 
padding:12px; 
} 
h2{ 
font-size:16px;text-align:center; 
， 
p{color:#333333;font-size:14px;line-height:180%;text-indent :2em;} 
</style> 
</head> 
<body> 
<h1> 春 </h1> 
<h2> 朱 自 清 </h2> 
<p> 盼 望 着 ， 有 盼望 着 ， 东 风 来 了 ， 春 天 的 脚步 近 了 。</p> 
<p> 一 切 都 像 刚 睡 醒 的 样子 ， 欣 欣然 张 开 了 眼 。 山 朗 润 起 来 了 ， 水 涨 起 来 了 ， 太 阳 的 脸红 起 来 了 。 
</p> 
<p> 小 草 偷偷 地 从 土 里 钻 出 来 ， 嫩 嫩 的 ， 绿 绿 的 。 园 子 里 ， 田 野 里 ， 瞧 去 ， 一 大 片 一 大 片 满 是 的 。 
坐 着 ， 躺 着 ， 打 两 个 滚 ， 踢 几 脚 球 ， 赛 几 趟 跑 ， 捉 几 回 迷 藏 。 风 轻 悄悄 的 ， 草 软 绵绵 的 。</P> 
</body> 
</html> 
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上 面 代码 中 ， 使 用 -moz-column-count 私有 属性 设置 了 多 列 布局 的 列 数 ，-moz-column-gap 
私有 属性 设置 列 间距 为 3em， 行 高 为 2.Sem。 

在 正 11.0 中 浏览 效果 如 图 16-20 所 示 ， 可 以 看 到 页 面 还 是 分 为 三 个 列 ， 但 列 之 间 的 距离 
相 比 原来 增 大 了 不 少 。 


- OO x 


© DmeNcode\hiONG. heml -0 wr- Pp- ® 
EE | 
前 和 E 下 oacn 


类 娟 ， 花 枝 朱 展 的 ， 半 若 ， 走 香 


窜 天 像 健壮 的 方 年 ， 有 铁 一 般 的 骆 遇 和 有 凤 ， 化 领 着 


我 们 上 亲友 


图 16-20 设置 列 间距 


16.3.4” 列 边框 样式 column-rule 

边框 是 样式 属性 中 不 可 缺少 的 属性 之 一 ,通过 边框 可 以 容易 的 界定 边框 内 容 ， 从 而 划分 不 
同 的 区 域 。 在 多 列 布局 中 ， 同 样 可 以 设置 多 列 布局 的 边框 ， 用 于 区 分 不 同 的 列 数 。 在 CSS3 中 ， 
边框 样式 使 用 coumn-rule 属性 定义 ， 包 括 边框 宽度 、 边 框 颜色 和 边框 样式 等 。 

coumn-rule 语法 格式 如 下 : 


column-rule: <length> | <style> | <color> 
其 中 属性 值 含义 如 表 16-1 所 示 。 


表 16-1 column-rule 属性 值 


属性 值 。 | 说 明 
由 浮 点 数 和 单位 标识 符 组 成 的 长 度 值 ， 不 可 为 负 值 。 用 于 定义 边框 宽度 ， 其 功能 和 


column-rule-width 属性 相同 
<style> 定义 边框 样式 ， 其 功能 和 column-rule-style 属性 相同 
<color> 定义 边框 颜色 ， 功 能 和 column-rule-color 属性 相同 


为 了 方便 网 页 设计 是 设计 灵活 的 边框 ，CSS3 在 column-rule 属性 的 基础 上 派生 了 三 个 列 边 
框 属性 ， 分 别 为 column-rule-width、column-rule-style 和 column-rule-color 属性 值 。 
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column-rule-color 属性 用 于 定义 边框 颜色 ， 其 颜色 值 接受 CSS3 支持 的 所 有 颜色 值 。 
column-rule-width 属性 定义 边框 宽度 ， 其 属性 值 可 以 是 任意 浮 点 数 。column-rule-style 定义 边框 
样式 , 其 属性 值 和 border-style 属性 值 相同 , 即 包括 none、 hidden、dotted、dashed、 solid、double、 


groove、 ridge、inset 和 ouset。 


【 例 16.7】〔 实 例文 件 : ch16\16.7.html) 


<!DOCTYPE html> 
<html> 
<head> 
<title> 多 列 布局 属性 </title> 
<style> 
body{ 
-moz-column-count:3; 
column-count:3; 
-moz-column-gap: 3em; 
column-gap:3em; 
line-height:2.5em; 
-moz-column-rule:dashed 2px gray;/*Webkit 引 擎 定义 多 列 布局 边框 样式 */ 
column-rule:dashed 2px gray; /*CSS3 定 义 多 列 布局 边框 样式 */ 
} 
hl{ 
Color:#333333; 
background-color:#DCDCDC; 
padding:5px 8px; 
font-size:20px; 
text-align:center; 
padding:12px; 
1 
h2{ 
font-size:16px;text-align:center; 
} 
p{color:#333333;font-size:14px;line-height:180%;text-indent :2em;} 
</style> 
</head> 
<body> 
<h1> 春 </h1> 
<h2> 朱 自 清 </h2> 
<p> 盼 望 着 ， 有 盼望 着 ， 东 风 来 了 ， 春 天 的 脚步 近 了 。</p> 
<p> 一 切 都 像 刚 睡 醒 的 样子 ， 欣 欣然 张 开 了 眼 。 山 朗 润 起 来 了 ， 水 涨 起 来 了 ， 太 阳 的 脸红 起 来 了 。 
</p> 
<p> 小 草 偷偷 地 从 土 里 钻 出 来 ， 嫩 嫩 的 ， 绿 绿 的 。 园 子 里 ， 田 野 里 ， 瞧 去 ， 一 大 片 一 大 片 满 是 的 。 
坐 着 ， 躺 着 ， 打 两 个 滚 ， 踢 几 脚 球 ， 赛 几 趟 跑 ， 捉 几 回 迷 藏 。 风 轻 悄悄 的 ， 草 软 绵绵 的 。</p> 
</body> 
</html> 


HTML5+CSS3+jQuery Mobilet+Bootstrap 开发 APP 从 入 门 到 精通 (视频 教学 版 ) 


在 body 标记 选择 器 中 ， 定 义 了 多 列 布局 的 列 数 、 列 间距 和 列 边框 样式 ， 其 边框 样式 是 灰 
色 破 折线 样式 ， 宽 度 为 2 像素 。 

在 正 11.0 中 浏览 效果 如 图 16-21 所 示 ， 可 以 看 到 页 面 列 之 间 添 加 了 一 个 边框 ， 其 样式 为 
破 折线 。 


图 16-21 定义 边框 样式 


16.4 ”综合 实例 一 一 电子 企业 首页 


小 型 企业 网 站 往往 非常 简单 ， 导 航 信息 不 断 但 要 求 突 出 主题 。 本 实例 模拟 一 个 电子 企业 首 
页 ， 总 体 上 是 上 中 下 结构 ， 中 间 采 取 左 右 版 式 。 具 体 步骤 如 下 : 


[0 出 分 析 需 求 。 
创建 一 个 上 中 下 的 布局 ， 再 加 上 中 间 的 左右 版 式 ， 需 要 5 个 div 层 。 


02 创建 HTML 网 页 ， 使 用 div 层 分 块 。 


<!DOCTYPE html> 

<html> 

<head> 

<title> 两 列 布局 </title> 

</head> 

<body> 

<div class="big"> 

<div class="nav"> 
<ul> 
<1i><a href="#"> 首 页 </a></1i> 
<1i><a href="#"> 企 业 新 闻 </a></1i> 
<1i><a href="#"> 视 听 新 闻 </a></1i> 
<1i><a href="#"> 市 场 快讯 </a></1i> 
<1i><a href="#"> 投 资 导 引 </a></1i> 
<1i><a href="#"> 每 天 报道 </a></1i> 
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</ul> 
</div> 
<div class="main"> 
<div class="left"> 
<div class="wen"> 
<h1> 中 国电 子 首次 入 选 《 财 富 》 世 界 500 强 </h1> 


<p>7 月 7 日 ， 美国 《财富 》 杂 志 发 布 2011 年 度 世 界 500 强 企业 排名 ， 中 国电 子 信息 产业 集 
团 有 限 公司 首次 入 选 世界 500 强 企业 ，.…-</P> 


</div> 
</div> 
<div class="right"> 
<img src="b0.jpg" border="0" /> 
<p>《 精 算 商 业 管 理 系统 》 针 对 中 小 企业 的 特点 ， 集 进 销 存 财务 管理 一 体 化 。 帮 助 企 
业 全 面 管 理 商品 账 、 资 金 账 、 往 来 账 、 费 用 账 ，.….</p> 
</div> 
</div> 
<div class="foot"> 
<p>2018 新 奇 工作 室 版 权 所 有 </p> 
</div> 
</div> 
</body> 
</html> 


上 面 代码 中 ， 层 big 是 一 个 布局 容器 ， 用 来 存放 其 他 div 层 ，nav 层 用 来 作为 页 头 部 分 ， 


main 层 是 网 页 主体 ， 包 含 两 个 div 层 ，left 层 为 页 面 主体 左 侧 ，right 层 为 页 面 主体 右 侧 。foot 
层 表示 页 脚 部 分 。 


在 正 11.0 中 浏览 效果 如 图 16-22 所 示 ， 可 以 看 到 自 上 而 下 排列 ， 上 面 是 超级 链接 信息 ， 
下 面 是 文本 和 图 片 。 


DA code hi O61 .html "0 we 及 
已 mk 局 
让 省 百 医 一 下 ， 作 SEX 让 


* 首页 

* 撤 昕 新闻 
。 击 场 快 讯 
， 失 次 导 引 
* 每 大 报道 


中 国电 村 且 次 入 选 《 财 富 》 世 界 500 强 


1 年 度 世 界 人 00 强 企业 排名 ， 中 国电 子 信息 产 ; 
8 至 此 ,中 


团 有 限 公司 首次 入 选 世界 5 
408 位 国电 子 提前 实现 进入 世界 5 
业 集团 初步 建成 。 


的 战略 目标 ， 一 个 具有 整 了 


儿 助 企业 全 面 管理 商品 帐 、 资 金 帐 、 
亏 的 来 龙 去 脉 ， 和 生计 个 直 天 


统 》 

解 每 一 件 商品 分 
大 程度 的 保障 企业 业务 处 理 
2019 风云 工作 室 版 权 所 有 


图 16-22 基本 HTML 页 面 
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轩 添加 CSS 修饰 整体 样式 。 


有 
padding:0px; 
margin:0px; 
有 
body{ 
font-family: "宋体"; 
font-size:12px; 
} 
.bigt{ 
width:900px; 
margin:0 auto 0 auto; 


] 


上 面 代码 定义 了 全 局 样式 ， 例 如 网 页 上 字体 类 型 为 宋体 ， 字 体 大 小 为 12 像素 ， 内 外 边 距 
都 是 0 像素。 在 big 选择 器 中 ， 定 义 整个 布局 容器 宽度 为 900 像素 。 
在 下 11.0 中 浏览 效果 如 图 16-23 所 示 ， 可 以 看 到 页 面 字体 变 小 ， 并 以 宋体 显示 。 


[| x 
| 加 DD:\ 李 书 渐 代码 \code\ch16\16.11 .html @-0 wn pr- 【] 
局 两 布局 “| 
育 各 百 友 一 下 ,你 和 和 0 通 
EE 
电灯 
页 局 快 记 
说 时 引 
号 过 乔 利 
中 国电 子 选 《 财 富 》 世 界 500 强 
7 有 反日 ， 美国 < 财富 0 度 世 办 注定 折 名。 中 国电 于 信息 大半 入 时 了 全 司 六 寺 岂 乔 600 星人 业 ， 座 257. 6 亿美 元 的 可 业 忆 入 位 民 405 位 ，。 至 此， 中国 
电子 提前 实现 进入 世界 目标 ， 一 个 具有 整体 办 这 各 争 力 、 生 站 一 法 的 包子 信息 产业 仿生 初步 寻 成 
了 
尽情 站 商业 答 理 系统 少 针 对 中 小 企业 的 特点 ， 集 进 销 让 叶 务 过 混 一 体 化 村 助 企业 全 面 昔 再 商号 帐 、 资 外相 、 往 款 你 、 费 用 椒 ， 清 蚜 地 了 名 本 一 件 商品 、 每 一 分 资金、 每 一 
和 从) 二 关 和 用 凡 罗 来 帮 二 守 ， 力 企业 两 庙 虹 的 信息 和 六 ， 最 大 各 度 的 人 全 人 外 更 的 村 和 安全， 但 二 业 的 训 汪 作 。 
2019 风云 


图 16-23 定义 全 局 样式 
国 纲 添加 CSS， 修 饰 页 头 部 分 。 


-navt{ 
background-color:#C2E3E9; 
width:800px; 

height:80px; 
background-image:url (80.jpg); 
} 

-nav ulf{ 
list-style-type:none; 

} 

amav LA 

float:left; 
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| 

.nav af 
display:block; 
width:120px; 
height:20px; 
line-height:20px; 
text-align:center; 
color:#6600CC; 
text-decoration:none; 
} 

.nav a:hover{ 
width:120px; 
height:20px; 
color:#990000; 
background-color:#CCCCCC; 
1 


在 选择 器 nav 中 ， 定 义 了 背景 色 、 背 景 图 片 、 宽 度 和 高 度 。 下 面 的 选择 器 分 别 定义 了 导航 


菜单 的 显示 样式 ， 例 如 无 序列 表 不 显示 符号 、 字体 大 小 颜色 、 对 齐 方式 和 行 高 等 。 


在 正 11.0 中 浏览 效果 如 图 16-24 所 示 ， 可 以 看 到 页 面 顶部 显示 了 一 个 图 片 ， 其 导航 菜单 


在 图 片 顶 部 显示 。 
= 口 x 
可 ”DA 太 书 晰 代码 \code\ch16\16.11 html -0 |R pr @ 
| 局 局 x 囊 
将 下 , fr 
Ea EL ED 市 而 Ri EE 本 天 报道 


T 


中 国电 子 广 次 入 先 《财富 》 TT 


Z 美 元 的 营业 收入 位 导 408 位 。 至 此 ， 中 国 


次 半幅、 往来 幅 
计生 斩 这 生生 


4 务 管理 一 个 化 。 却 有 企业 全 而 管理 


二 地 了 外 和 一 件 商品 、 折 一 分 深 宇 ， 和 一 
供 让 好 的 信息 和 理 军 道 ， 所 大 和 去 的 介 业 约 高 好 运作 ， 


图 16-24 定义 页 头 部 分 
是 添加 CSS， 修 饰 页 面 主体 。 


.mainf{ 
width:800px; 
height:400px; 

} 

.left{ 

width:618px; 

float:left; 

height:400px; 

text-align:center; 
border:lpx solid #cbcbcb; 

上 
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.left imgf 
margin:10px 0 10px 0; 
} 

-left pt{ 

text-indent :2em; 
text-align:left; 
font-size:13px; 
line-height:30px; 

} 

.right{ 

width:178px; 
float:left; 
height:400px; 
text-align:center; 
border:1px solid #cbcbcb; 
} 

.right pt{ 
text-indent:2em; 
font-size:13px; 


} 


上 面 代码 中 ，main 选择 器 定义 中 间 容 器 整体 宽度 为 800 像素 ， 高 度 为 400 像素 ，left 选择 
定义 网 页 主体 左 侧 部 分 样式 ， 如 宽度 为 618 像素 ， 高 度 为 400 像素 ，float 指定 div 层 在 左 侧 浮 
动 布局 。Right 选择 器 定义 页 面 主体 右 侧 部 分 ， 例 如 宽度 为 178 像素 ， 高 度 为 400 像素 ， 文 本 
居中 对 齐 等 。 

在 正 11.0 中 浏览 效果 如 图 16-25 所 示 ， 可 以 看 到 页 面 中 间 部 分 分 为 两 个 边框 显示 ， 左 侧 
部 分 显示 了 段落 信息 ， 右 侧 部 分 显示 了 图 片 和 文本 信息 。 


口 x 
| 加 DA 本 书 六 (Nicode\ch16\16.11 .html -0 | 3 了- 万 - © 
本 有 x 上 
| 亩 汪 百 枯 - 下 ,thotx0 利 

到 GE ED TR ES E22] 
9 
中 国电 子 首次 入 选 《 财 宫 》 世 界 500 强 
7 月 ?日 ,美国 < 财富 》 杂 志 发 布 201 年 度 世 办 300 强 企业 排名 ， 中 国电 子 信息 产业 集团 有 限 公司 首次 入 选 
世界 500 强 企业 ， 以 237.6 忆 美元 的 营业 收入 位 导 中 国电 子 提前 实现 进入 世界 500 强 的 战 咯 目 
怀 ， 一 个 县 有 椭 休 皖 侣 沈 争 力 、 国 内 一 演 的 电子 信息 产业 集团 初步 于 成 
2019 风 去 工作 室 
各所 有 


图 16-25 定义 主体 部 分 
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La 图 添加 CSS， 修 饰 页 脚 部 分 。 
-foot{ 

height:15px; 
text-align:center; 

; 

-foot Pi 
font-style:italic; 
font-size:10px; 
width:800px; 
text-align:center; 


] 
上 面 代码 定义 了 页 脚 部 分 显示 样式 ， 


中 字体 大 小 为 10 像素 ， 居 中 对 齐 等 。 
在 IE 11.0 中 浏览 效果 如 图 16-26 所 示 ， 可 以 看 到 页 脚 部 分 居 


例如 页 脚 高 度 


0 DiVE 忆 p13\code\eh16\16.11 html -0 mr 
WAI 布局 . 
元 各 百度- 下 ,你 Wi 
Ea 证 业 新 闻 于 新 闻 ET [EE 


集团 有 限 公司 百 次 入选 
丢人 世界 500 强 的 战 陵 目 


7 月? 日, 美国 《< 财 1 
岂 界 500 强 企业 ， 以 4 
讨 ， 一 个 具有 整体 综合 竟 争 力 、 国 内 一 泳 的 电子 信 息 产 业 : 


Ni RFTAE RRRN 


为 15 像素 ， 文 本 居中 对 齐 ， 段 落 样 式 


中 显示 ， 其 字体 以 斜体 显示 。 


与 天 报 省 


图 16-26 定义 页 脚 部 分 


16.5 ”专家 解 惑 


1. IE 浏览 器 和 Firefox 浏览 器 ， 显 示 float 沪 
两 个 相连 的 IDV 块 ， 如 果 一 
中 就 会 出 现 设置 失效 的 问题 。 其 原因 是 


正 浏览 


浮动 布局 会 出 现 不 同 的 效果 ， 为 什么 ? 
个 设置 为 左 浮 动 ， 一 个 设置 为 右 浮动 ， 这 时 在 Firefox 浏览 
会 根据 设置 来 判断 float 浮动 ， 而 在 Firefox 
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中 ， 如 果 上 一 个 float 没有 被 清除 的 话 ， 则 下 一 个 float 会 自动 沿用 上 一 个 float 的 设置 ， 而 不 使 
用 自己 的 float 设置 。 

这 个 问题 的 解决 办 法 就 是 ， 在 每 一 个 DIV 块 设置 float 后 ， 在 最 后 加 入 一 句 清 除 浮 动 的 代 
码 clear:both， 这 样 就 会 清除 前 一 个 浮动 的 设置 了 ， 下 一 个 float 也 就 不 会 再 使 用 上 一 个 浮动 设 
置 ， 从 而 使 用 自己 所 设置 的 浮动 了 。 

2. div 层 高 度 设置 好 ， 还 是 不 设置 好 ? 

在 正 浏览 器 中 ， 如 果 设 置 了 高 度 值 ， 但 是 内 容 很 多 ， 会 超出 所 设置 的 高 度 ， 这 时 浏览 器 
就 会 自己 撑 开 高 度 ， 以 达到 显示 全 部 内 容 的 效果 ， 不 受 所 设置 的 高 度 值 限制 。 而 在 Firefox 浏 
览 嚣 中， 如果 固 定 了 高 度 的 值 ， 那 么 容器 的 高 度 就 会 被 固定 住 , 就 算 内 容 过 多 , 他 也 不 会 撑 开 ， 
也 会 显示 全 部 内 容 ， 但 是 如 果 容 器 下 面 还 有 内 容 的 话 ， 那 么 这 一 块 就 会 与 下 一 块 内 容重 合 。 

这 个 问题 的 解决 办 法 就 是 ， 不 要 设置 高 度 的 值 ， 这 样 浏览 器 就 会 根据 内 容 自 动 判断 高 度 ， 
也 不 会 出 现 内 容重 合 的 问题 。 


es YC A 
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针对 不 同 移动 设备 上 显示 界面 统一 的 问题 , jQuery 又 推出 了 新 的 函数 库 jQuery Mobile。 本 
章节 将 重点 学 习 jQuery Mobile 的 基础 知识 。 


17.1 认识 jQuery Mobile 


jQuery Mobile 是 jQuery 在 手机 上 和 平板 设备 上 的 版 本 。jQuery Mobile 不 仅 会 给 主流 移动 
平台 带 来 jQuery 核心 库 , 而 且 会 发 布 一 个 完整 统一 的 jQuery 移动 UI 框架 。 通过 jQuery Mobile 
制作 出 来 的 网 页 能 够 支持 全 球 主流 的 移动 平台 ， 而 且 在 浏览 网 页 时 ， 能 够 拥有 操作 应 用 软件 一 
样 的 触 碰 和 滑动 效果 。 

jQuery Mobile 的 优势 如 下 : 


(1) 简单 易 用 : jQuery Mobile 简单 易 用 。 页 面 开 发 主要 使 用 标记 ， 无 须 或 仅 需 很 少 
JavaScript。jQuery Mobile 通过 HTMLS5 标记 和 CSS3 规范 来 配置 和 美化 页 面 ， 对 于 已 经 熟悉 
HTML5 和 CSS3 的 读者 来 说 ， 上 手 非常 容易 ， 架 构 清 晰 。 

(2) 跨 平 台 : 目前 大 部 分 的 移动 设备 浏览 器 都 支持 HTML5 标准 和 jQuery Mobile， 所 以 
可 以 实现 跨 不 同 的 移动 设备 。 例 如 Android、Apple IOS、BlackBery、Windows Phone、Symbian 
和 MeeGo 等 。 

(3) 提供 丰富 的 函数 库 : 常见 的 键盘 、 触 碰 功 能 等 ， 开 发 人 员 不 用 编写 代码 ， 只 需要 经 
过 简单 的 设置 ， 就 可 以 实现 需要 的 功能 ， 大 大 减少 了 程序 员 开 发 的 时 间 。 

(4) 丰富 的 布景 主题 和 ThemeRoller 工具 : jQuery Mobile 提供 了 布局 主题 ， 通 过 这 些 主 
题 ， 可 以 轻 轻 松 松 地 快速 创建 绚丽 多 彩 的 网 页 。 通 过 使 用 jQuery UT 的 ThemeRoller 在 线 工具 ， 
只 需要 在 下 拉 菜 单 中 进行 简单 的 设置 ， 就 可 以 制作 出 丰富 多 彩 的 网 页 风格 ,并 且 可 以 将 代码 下 
载 下 来 应 用 。 


jQuery Mobile 的 操作 流程 如 下 : 


(1) 创建 HTML5 文件 。 


HTML5+CSS3+jQuery MobiletBootstrap 开发 APP 从 入 门 到 精通 (视频 教学 版 ) 


(2) 载 入 jQuery、jQuery Mobile 和 jQuery Mobile CSS 链接 库 。 
(3) 使 用 jQuery Mobile 定义 的 HTML 标准 ， 编 写 网 页 架构 和 内 容 。 


17.2” 跨 平台 移动 设备 网 页 jQuery Mobile 


学 习 移动 设备 的 网 页 设计 开发 ， 遇 到 最 大 的 难题 是 跨 浏览 器 支持 的 问题 。 为 了 解决 这 个 问 
题 ，jQuery 推出 了 新 的 函数 库 jQuery Mobile， 主 要 用 于 统一 当前 移动 设备 的 用 户 界面 。 


17.2.1 移动 设备 模拟 器 


网 页 制作 完成 后 ， 需 要 在 移动 设备 上 预览 最 终 的 效果 。 为 了 方便 预览 效果 ， 用 户 可 以 使 用 
移动 设备 模拟 器 ， 常 见 的 移动 设备 模拟 器 是 Opera Mobile Emulator。 

Opera Mobile Emulator 是 一 款 针对 电脑 桌面 开发 的 模拟 移动 设备 的 浏览 器 ， 几 乎 完全 重 现 
opera mobile 手机 浏览 器 的 使 用 效果 ,可 自行 设置 需要 模拟 的 不 同型 号 的 手机 和 平板 电脑 配置 ， 
然后 电脑 上 模拟 各 类 手机 等 移动 设备 访问 网 站 。 

Opera Mobile Emulator 的 下 载 网 址 : http://www.opera.com/zh-cn/developer/mobile-emulator/， 
根据 不 同 的 系统 选择 不 同 的 版 本 ， 这 里 选择 windows 系统 下 的 版 本 ， 如 图 17-1 所 示 。 


- 0O x 
| 困 -1O http://www.opera.com/zh-cn/developer/mobile-emulator po 图 
| © opers Mobile cassicE。x 


| 文件 站 ”二 (查看 V) 收藏 交工 具 人 


半 动 (H) 


Your Web, documented 


yo 
ee PP” 
入 时 A rE 4 


Do your mobile development straight from your desktop, and pairit with Opera Dragonfly for advanced 
debugging. 

| Bee vobie Cassic Emulator 121for Windows 

| Opera Mobile Classic Emulator 121for Mac 

| Opera Mobile Classic Emulator 12.1 for Linux v 

| 


丽 100% ~ 


图 17-1 Opera Mobile Emulator 的 下 载 页 面 


下 载 并 安装 之 后 启动 Opera Mobile Emulator， 打 开 如 图 17-2 所 示 的 窗口 ， 在 【资料 】 列 表 
框 中 选择 移动 设备 的 类 型 ， 这 里 选择 【LG Optimus 3D】 选 项 ， 单 击 【启动 】 按 钮 。 
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打开 欢迎 界面 ， 用 户 可 以 单 击 不 同 的 链接 ， 查 看 该 软件 的 功能 ， 如 图 17-3 所 示 。 


心 opera Mobile Emulator 一 x 人 @opevo- - OO xl 
资料 欢迎 使 用 Opera Mobile 
[Hrconex ^| 缚 齐 WO Portrait C50X600) = 1211 
HTC Sensation 和 = ne 
HTC Tattoo 
HTC Wildfire 像素 密度 216 ~ 
LG Intuition 潭 
LG Optimus 3D 
LG Optimus One 用 户 界面 Touch = 
LG T-Mobile G2X Vser Agent 字符 虽 。 |Android ~ 
Lenovo ldeapad K1 
Motorola Atrix 4G | 硬 be 
sk 人 好 a 

保存 /另存 为 时 启 吉 完全 重要 浏 里 口 mews em 吕 
| 
| | 

图 17-2 参数 设置 图 17-3 欢迎 界面 


单 击 【接受 】 按 钮 ， 打 开 手 机 模拟 器 界面 ， 在 【输入 网 站 】 文 本 框 中 输入 需要 查看 网 页 效 
果 的 地 址 即 可 ， 如 图 17-4 所 示 。 

例如 这 里 直接 单 击 【当当 网 】 图 标 ， 即 可 查看 当当 网 在 该 移动 设备 模拟 器 中 的 效果 ， 如 图 
17-5 所 示 。 


四 
0。 SR 


LG Opti 480x80t ppt: 216 [D3] [50%5 LG op 480x80! ppt 21¢ [DR [50% ~ 


图 17-4 手机 模拟 器 界面 图 17-5 查看 预览 效果 


Opera Mobile Emulator 不 仅 可 以 查看 移动 网 页 的 效果 ， 还 可 以 任意 调整 窗口 的 大 小 ， 从 而 
可 以 查看 不 用 屏幕 尺寸 的 效果 , 这 点 也 是 Opera Mobile Emulator 与 其 他 移动 设备 模拟 器 相 比 最 
大 的 优势 。 
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公 


.2.2 jQuery Mobile 的 安装 


想 要 开发 jQuery Mobile 网 页 ， 必 须要 引用 JavaScript 函数 库 〈.js) 、CSS 样式 表 和 配套 的 


jQuery 函数 库 文件 。 常 见 的 引用 方法 有 以 下 两 种 : 


1. 直接 引用 jQuery Mobile 库 文 件 
从 jQuery Mobile 的 官网 下 载 该 库 文件 (网 址 是 http://jquerymobile.com/download/) ， 如 图 


17-6 所 示 。 


该 


x 
| B® htp//jquerymobile.com/download pre © 
| Downlosd [jQuery Mobile * 

文件 ( 坊 雪 (E) 查看 V) 收 站 闪 A) 工具 (帮助 (H) 


Latest stable version 

1.4.5 

ZIP file 

If you want to host the files yourself you can download a zip of all the files: 


Zip File: jquery mobile-1 条 zip (JavaScript CSS, and images) 


jQuery CDN provided by MaxCDN 
JavaScript 


Uncompressed: jquery.mobile-1 4.5 js (useful for debugging) 
Minified and Gzipped: jquery mobile-1.4.5.min js (full fibrary, ready to 
deploy) 

httpy//jquerymobile.com/resources/download/jquery mobile-14.5.5p 有 100%6 ~ 


图 17-6 ”下载 jQuery Mobile 库 文 件 


下 载 完成 即 可 解压 ， 然 后 直接 引用 文件 即 可 ， 代 码 如 下 : 


<head> 

<meta name="viewport" content="width=device-width，initial-scale=1"> 
<link rel="stylesheet" href="jquery.mobile-1.4.5.css"> 

<script src="jquery.js"></script> 

<script src="jquery.mobile-1.4.5.js"></script> 

</head> 


注意 ， 将 下 载 的 文件 解压 到 和 网 页 位 于 同一 目录 下 ， 和 否则 会 无 法 引用 而 报错 。 

细心 的 读者 会 发 现 ， 在 <scrip 人 标签 中 没有 插入 type="text/javascript"， 这 是 什么 原因 呢 ? 
为 所 有 的 浏览 器 中 HTMLS5 的 默认 脚本 语言 就 是 JavaScript, 所 以 在 HIMLS 中 已 经 不 再 需要 
属性 。 

2. 从 CDN 中 加 载 jQuery Mobile 

CDN 的 全 称 是 Content Delivery Network， 即 内 容 分 发 网 络 。 其 基本 思路 是 尽 可 能 避 开 互 


联网 上 有 可 能 影响 数据 传输 速度 和 稳定 性 的 瓶颈 和 环节 ， 使 内 容 传输 的 更 快 、 更 稳定 。 
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使 用 CDN 中 加 载 jQuery Mobile, 用 户 不 需要 在 电脑 上 安装 任何 东西 。 用 户 仅仅 需要 在 网 
页 中 加 载 层 县 样式 css) 和 JavaScript 库 (js) 就 能 够 使 用 jQuery Mobile。 
用 户 可 以 从 jQuery Mobile 官网 中 查找 引用 路 径 ， 网 址 是 
http://jquerymobile.com/download/， 进 入 该 网 站 后 ， 找 到 jQuery Mobile 的 引用 链接 ， 然 后 将 其 
复制 后 添加 到 HTML 文件 <head> 标 记 中 即 可 ， 如 图 17-7 所 示 。 


Uncompressed structure without atheme iquery mobile-1.4 5.css (useful for theme development) 


and Gzipped shuclure whthout 3 theme jauery mobile 1.4.5 min css (lo be used wilh custom theme andicon 
ee ,ody to oopey) 


Copy-and-Paste snippet for /Query CDN hosted 人 es 


Te 


script or ode jquery -con/ jquery-1-11 
ED /code -javary- con/ 3av11C71.4.5/ Inverd ood {AreS.ein.3s"3</senipt? 


Google CDN 


hmpUiaiax googleapis com/aialibsiouerymobile/1 4 5auery mobile Is 


复制 选中 的 代码 到 TNL 文件 中 
htlp latax. googleapts comatauhbsiguerymobde/1 4.5hquery mobde mn fs 


er 4.5f 


hlp /ajax googleapts com/ajawhbsauerymoblie/ 4 Suery moblle min css 


图 17-7 下 载 jQuery Mobile 库 文件 


将 代码 复制 到 <head> 标 记 块 内 。 


<head> 
<!-- meta 使 用 viewport 以 确保 页 面 可 自由 缩放 --> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<!-- 引入 jQuery Mobile 样式 --> 
<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<!-- 引入 jQuery 库 --> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<!-- 引入 jQuery Mobile 库 --> 
<script 
src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></scri 
pt> 
</head> 


注意 ， 因 为 jQuery Mobile 函数 库 仍然 在 开发 中 ， 所 以 引用 的 链接 中 的 版 本 号 可 能 会 与 本 
书 不 同 ， 请 使 用 官方 提供 的 最 新 版 本 ， 只 要 按照 上 述 方法 将 代码 复制 下 来 引用 即 可 。 


17.2.3 jQuery Mobile 网 页 的 架构 


jQuery Mobile 网 页 是 由 header、content 与 footer 三 个 区 域 组 成 的 架构 ， 利 用 <div> 标 记 加 
上 HTML5 自 定义 属性 data-* 来 定义 移动 设备 网 页 组 件 样式 ， 最 基本 的 属性 data-role 可 以 用 来 
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定义 移动 设备 的 页 面 架构 ， 语 法 格式 如 下 : 


<div data-role="page"> 
<! 一 开始 一 个 page--> 
<div data-role="header"> 
<h1> 这 个 是 标题 </h1> 
</div> 
<div data-role="main" class="ui-content"> 
<p> 这 里 是 内 容 </p> 
</div> 
<div data-role="footer"> 
<h1> 底 部 文本 </h1> 
</div> 
</div> 


模拟 器 中 预览 效果 如 图 17-8 所 示 。 


I@opreMobie.. - ODO x 
data-role [ee 
="header= 这 个 是 标题 
data-role 
="main” 这 里 是 内 容 _data-role 
一 ="page” 
data-role 底部 文本 
="footer” 
~ SE 


HTC Evo : 540x766 ppl: 256 D 50% 
图 17-8 程序 预览 效果 
从 结果 可 以 看 出 ，jQuery Mobile 网 页 以 页 (page) 为 单位 ， 一 个 HTML 页 面 可 以 放 一 个 


页 面 ， 也 可 以 放 多 个 页 面 ， 只 是 浏览 器 每 次 只 会 显示 一 页 ， 如 果 有 多 个 页 面 ， 则 需要 在 页 面 中 
添加 超 链 接 ， 从 而 实现 多 个 页 面 的 切换 。 


【案例 分 析 】 

(1) data-role="page" 是 在 浏览 器 中 显示 的 页 面 。 

(2) data-role="header" 是 在 页 面 项 部 创建 的 工具 条 ， 通 常用 于 标题 或 搜索 按钮 。 
(3) data-role="main" 定义 了 页 面 的 内 容 ， 比 如 文本 、 图 片 、 表 单 、 按 钮 等 。 
(4) mi-content" 类 用 于 在 页 面 添加 内 边 距 和 外 边 距 。 
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(5) data-role="footer" 用 于 创建 页 面 底部 工具 条 。 


17.3 创建 多 页 面 的 jQuery Mobile 网 页 


本 实例 将 使 用 jQuery Mobile 制作 一 个 多 页 面 的 jQuery Mobile 网 页 ， 并 创建 多 个 页 面 。 使 
用 不 同 的 id 属性 来 区 分 不 同 的 页 面 。 


【 例 17.1】 《实例 文件 : ch17\17.1.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script 
src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></scri 
pt> 
</head> 
<body> 
<div data-role="page" id="first"> 
<div data-role="header"> 
<h1> 古 诗 欣 赏 </h1> 
</div> 
<div data-role="main" class="ui-content"> 
<p> 几 回 花 下 坐 吹 第 ， 银 汉 红 墙 入 望 听 。</p> 
<a href="#second"> 下 一 页 </a> 
</div> 
<div data-role="footer"> 
<h1> 清 代 诗 人 </h1> 
</div> 
</div> 
<div data-role="page" id="second"> 
<div data-role="header"> 
<h1> 古 诗 欣 赏 </h1> 
</div> 
<div data-role="main" class="ui-content"> 
<p> 似 此 星辰 非 昨 夜 ， 为 谁 风 露 立 中 宵 。</p> 
<a href="#first">E— 页 </a> 
</div> 
<div data-role="footer"> 
<h1> 清 代 诗人 </h1> 
</div> 
</div> 
</body> 
</html> 
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模拟 器 中 预览 效果 如 图 17-9 所 示 。 单 击 【 下 一 页 】 超 链接 ， 即 可 进入 第 二 页 ， 如 图 17-10 
所 示 。 单 击 【 上 一 页 】 超 链接 ， 即 可 返回 到 第 一 页 中 。 


ns Gor er 
pr [cooge ] Google  ] 
古诗 欣赏 古诗 欣赏 
几 回 花 下 坐 吹 舌 ， 银 汉 红 墙 入 望 遥 。 似 此 星 捅 非 昨夜 ， 为 谁 风 露 立 中 宵 。 
下 一 页 上 一 页 
清 代 诗人 清 代 诗人 


mee 0 rr Mee Mpat0 poh 256 [0] ODN 
图 17-9 程序 预览 效果 图 17-10 第 二 页 预览 效果 


17.4 ”将 页 面 作为 对 话 框 使 用 


对 话 框 是 用 于 显示 页 面 信息 显示 或 者 表单 信息 的 输入 。jQuery Mobile 通过 在 链接 中 添加 如 
下 属性 ， 即 可 将 页 面 作为 对 话 框 使 用 。 


data-dialog="true" 


【 例 17.2】〔 实 例文 件 : ch17\17.2.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script 
src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></scri 
pt> 
</head> 
<body> 
<div data-role="page" id="first"> 
<div data-role="header"> 
<h1> 古 诗 鉴赏 </h1> 
</div> 
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<div data-role="main" class="ui-content"> 


<p> 浩 荡 离 悉 白 日 斜 ， 吟 鞭 东 指 即 天 涯 。 落 红 不 是 无 情 物 ， 化 作 春 泥 更 护 花 。</p> 


<a href="#second"> 查 看 详情 </a> 


</div> 
<div data-role="footer"> 
<h1> 清 代 诗 词 </h1> 
</div> 
</div> 


<div data-role="page" data-dialog="true" id="second"> 


<div data-role="header"> 
<h1> 诗 词 鉴赏 </h1> 
</div> 


<div data-role="main" class="ui-content"> 


<p> 这 首 诗 是 《 己 北 杂 诗 》 的 第 五 首 ， 写 诗人 离 京 的 感受 。 虽 然 载 着 “浩荡 离愁 ”， 却 表示 仍 


然 要 为 国 为 民 尽 自 己 最 后 一 份 心力 。</p> 
<a href="#first"> 上 一 页 </a> 
</div> 
<div data-role="footer"> 
<h1> 清 代 诗 词 </h1> 
</div> 
</div> 
</body> 
</html> 


模拟 器 中 预览 效果 如 图 17-11 所 示 。 单 击 【 查 看 详情 】 超 链接 ， 即 可 打开 一 个 对 话 框 ， 如 


图 17-12 所 示 。 


© op Mob, 


fileyocalhosvCyUser: 高 荐 5002e | 


古诗 鉴赏 


浩荡 离愁 白 日 匀 ， 吟 哄 东 指 即 天 涯 。 落 红 
不 是 无 情 物 ， 化 作 春 泥 更 护 花 。 


查看 详情 


清 代 诗 词 


lrc Evo a0 291 pp 256 Bk) [OO 


图 17-11 程序 预览 效果 


| flewocalhosvc:/User: 家 | /localhost/C:/User: 离 


诗词 鉴赏 


这 首 诗 是 《已 雍 杂 诗 》 的 第 五 首 , 写 
诗人 高 京 的 感受 。 虽 然 载 着 "浩荡 高 
瑚 "， 却 表示 仍然 要 为 国 为 民 尽 自己 最 
后 一 份 心力 。 


上 = 页 
清 代 诗词 


HEo3D 82x591 ppt 256 Gs] [100W 


图 17-12 对话 框 预览 效果 


从 结果 可 以 看 出 ， 对 话 框 与 普通 页 面 不 同 ， 它 显示 在 当期 页 面 上 ， 但 又 不 会 填充 完整 的 页 
面 ， 顶 部 图 标 空 用 于 关闭 对 话 框 ， 单 击 【 上 一 页 】 链 接 也 可 以 关闭 对 话 框 。 
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17.5 绚丽 多 彩 的 页 面 切换 效果 


jQuery Mobile 提供 了 各 种 页 面 切换 到 下 一 个 页 面 的 效果 ， 主 要 通过 设置 data-transition 属 
性 来 完成 各 种 页 面 切换 效果 。 语 法 规则 如 下 : 


<a href="#1link"” data-transition=" 切 换 效果 "> 切换 下 一 页 </a> 
其 中 切换 效果 有 很 多 ， 如 表 17-1 所 示 。 


表 17-1 页 面 切换 效果 


页 面 效 果 参 数 含义 

fade 默认 的 切换 效果 。 淡 入 到 下 一 页 
none 无 过 渡 效 果 

flip 从 后 向 前 翻转 到 下 一 页 

flow 抛 出 当前 页 ， 进 入 下 一 页 
pop 像 弹 出 窗口 那样 转 到 下 一 页 
slide 从 右 向 左 滑动 到 下 一 页 
slidefade 从 右 向 左 滑动 并 淡 入 到 下 一 页 
slideup 从 下 到 上 滑动 到 下 一 页 
slidedown 从 上 到 下 滑动 到 下 一 页 

tum 转向 下 一 页 


注意 ， 在 jQuery Mobile 的 所 有 链接 上 ， 默 认 使 用 淡 入 淡出 的 效果 。 
例如 ， 设 置 页 面 从 右 向 左 滑动 到 下 一 页 ， 代 码 如 下 : 
<a href="#second" data-transition="slide"> 切 换 下 一 页 </a> 


上 面 的 所 有 效果 支持 后 退行 为 .例如 , 用 户 想 让 页 面 从 左 向 右 滑动 , 可 以 添加 data-direction 
属性 为 "reverse" 值 即 可 。 代 码 如 下 : 


<a href="#second" data-transition="slide" data-direction="reverse"> 切 换 下 


一 页 </a> 


【 例 17.3】〔 实 例文 件 : ch17\17.3.html) 

<!DOCTYPE html> 

<html> 

<head> 

<meta name="viewport" content="width=device-width, initial-scale=1"> 

<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
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<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script 
src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></scri 
pt> 
</head> 
<body> 
<div data-role="page" id="first"> 
<div data-role="header"> 
<h1> 古 诗 欣 赏 </h1> 
</div> 
<div data-role="main" class="ui-content"> 
<p> 老 农家 贫 在 山 住 ， 耕 种 山田 三 四 亩 。</P> 
<! 一 实现 从 右 到 左 切换 到 下 一 页 --> 
<a href="#second" data-transition="slide"” > 下 一 页 </a> 
</div> 
<div data-role="footer"> 
<h1> 野 老 歌 </h1> 
</div> 
</div> 
<div data-role="page" id="second"> 
<div data-role="header"> 
<h1> 古 诗 欣 赏 </h1> 
</div> 
<div data-role="main" class="ui-content"> 
<p> 岁 暮 钢 旭 傍 空 室 ， 呼 儿 登 山 收 橡 实 。</p> 
<! 一 实现 从 左 到 右 切 换 到 下 一 页 --> 
<a href="#first" data-transition="slide" data-direction="reverse"> 上 
一 页 </a> 
</div> 
<div data-role="footer"> 
<h1> 野 老 歌 </h1> 
</div> 
</div> 
</body> 
</html> 


模拟 器 中 预览 效果 如 图 17-13 所 示 。 单 击 【下 一 页 】 超 链接 即 可 从 右 到 左 滑动 进入 第 二 页 ， 
如 图 17-14 所 示 。 单 击 【 上 一 页 】 超 链接 即 可 从 左 到 右 滑动 返回 到 第 一 页 中 。 


© pea Motie - a x © Opers Mobae - Curom - © x 
古诗 欣 党 
老农 家 黄 在 山 住 ， 耕 种 山田 三 四 亩 。 岁 暮 钢 犁 傍 空 室 ， 呼 儿 登 山 收 橡 实 。 
下 一 页 1 3 
时 老 歌 对 老 歌 


[Em aass pz 因 [ODE = Camomn sess pp-233 [Ds [WOO% > 


图 17-13 ”程序 预览 效果 图 17-14 第 二 页 预览 效果 
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17.6 专家 解 惑 


1. 如 何在 模拟 器 中 查看 做 好 的 网 页 效果 ? 

HTML 文件 制作 完成 后 ， 要 想 在 模拟 器 中 测试 ， 可 以 在 地 址 栏 中 输入 文件 的 路 径 ， 例 如 输 
入 如 下 : 

file://localhost/ch16/16.2.html 

为 了 防止 输入 错误 ,可 以 直接 将 文件 拖 忠 到 地 址 栏 中 ， 模 拟 器 会 自动 帮助 用 户 添加 完整 路 
径 。 

2. jQuery Moblie 都 是 支持 哪些 移动 设备 ? 

目前 市 面 上 移动 设备 非常 多 ， 如 果 想 查询 jQuery Moblie 都 是 支持 哪些 移动 设备 ， 可 以 参 
照 jQuery Moblie 网 站 的 各 厂商 支持 表 ， 还 可 以 参考 维基 百科 网 站 对 jQuery Moblie 说 明 中 提供 
的 Mobile browser support 一 览 表 。 

3. 我 的 浏览 器 为 什么 不 支持 页 面 切换 效果 ? 

为 了 实现 页 面 切换 效果 ， 浏 览 器 必须 支持 功能 。 目 前 ， 支 持 CSS3 3D 切换 功能 的 浏览 器 
最 小 版 本 包括 下 10.0 浏览 器 、Chrome 12.0 浏览 器 、Firefox 16.0 浏览 器 、Safari 4.0 浏览 器 和 
Opera 15.0 浏览 器 等 。 
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jQuery Mobile 针对 用 户 界面 提供 了 各 种 可 视 化 的 标签 ， 包 括 按钮 、 复 选 杠 、 选 择 菜单 、 


列表 、 弹 窗 、 工 具 栏 、 面 板 、 导 航 和 布局 等 ， 这 些 可 视 化 标签 与 HIML5 标记 一 起 使 用 ， 


轻松 地 开发 出 绚丽 多 彩 的 移动 网 页 。 本 章节 将 重点 学 习 这 些 标 签 的 使 用 方法 和 技巧 。 


18.1 套用 UI 组 件 


即 可 


jQuery Mobile 提供 很 多 可 视 化 的 UI 组 件 ， 只 要 套用 之 后 ， 就 可 以 生成 绚丽 并 且 适 合 移动 


设备 使 用 的 组 件 。 jQuery Mobile 中 各 种 可 视 化 的 UI 组 件 与 HIML5 标记 大 同 小 异 。 下 
常用 的 组 件 的 用 法 ， 其 中 按钮 、 列 表 等 功能 变化 比较 的 大 的 后 面 会 做 详细 介绍 。 


18.1.1 表单 组 件 


i 介绍 


jQuery Mobile 使 用 CSS 自动 为 HTML 表单 添加 样式 ， 让 它们 看 起 来 更 具 吸 引力 ， 触 摸 起 


来 更 具 友好 性 。 
在 jQuery Mobile 中 ， 经 常 使 用 的 表单 控件 如 下 : 
1. 文本 框 输入 框 
文本 输入 框 的 语法 规则 如 下 : 


<input type="text" name="fname" id="fname" value=" "> 


其 中 value 属性 是 文本 框 中 显示 的 内 容 ， 也 可 以 使 用 placeholder 来 指定 一 个 简短 的 描述 ， 


用 来 描述 输入 内 容 的 含义 。 


【 例 18.1】〔 实 例文 件 :， ch18\18.1.html) 


<!DOCTYPE html> 
<html> 
<head> 


<meta name="viewport" content="width=device-width, initial-scale=1"> 


<link rel="stylesheet" 


href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
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<script 
src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></scri 
pt> 
</head> 
<body> 
<div data-role="first"> 
<div data-role="header"> 
<h1> 输 入 会 员 信 息 </h1> 
</div> 
<div data-role="main" class="ui-content"> 
<form> 
<div class="ui-field-contain"> 
<label for="fullname"> 姓 名 : </label> 
<input type="text" name="fullname" id="fullname"> 
<label for="bday"> 出 生年 月 : </label> 
<input type="date" name="bday" id="bday"> 
<label for="email">E-mail:</label> 
<input type="email" name="email" id="email" placeholder=" 输 入 您 的 电 
于 邮箱 "> 
</div> 
<input type="submit" data-inline="true" value=" 注 册 "> 
</form> 
</div> 
</div> 
</body> 
</html> 


模拟 器 中 预览 效果 如 图 18-1 所 示 。 单 击 【 出 生年 月 】 下 拉 按 钮 时 ， 会 自动 打开 日 期 选择 
器 ， 用 户 直接 选择 相应 的 日 期 即 可 ， 如 图 18-2 所 示 。 


© Opers Moble - custcm 一 o x ©@ Opers Mcbile - Custom 一 D 
输入 会 员 信息 | 引 2016 问 
到 三 二 :本 五 炎 : 生 
姓名 : 训 
4 .55678 910 
出 生年 月 : 1 12 14 45 -165 17 
a saa aaa | 
[25 20 27 28 29 30 3 十 | 
E-mail: 
2 34 7 
输入 您 的 电子 
今天 
注册 注册 
es er ke en | 
图 18-1 程序 预览 效果 图 18-2 日 期 选择 器 


2. 文本 域 
使 用 <textarea> 可 以 实现 多 行文 本 输入 效果 。 
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【 例 18.2】〔 实 例文 件 : ch18\18.2.html) 


<!DOCTYPE html> 

<html> 

<head> 

<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" 


href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 


<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script 


src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></scri 


</head> 
<body> 
<div data-role="first"> 
<div data-role="header"> 
<h1> 文 本 框 </h1> 
</div> 
<div data-role="main" class="ui-content"> 
<form> 
<div class="ui-field-contain"> 
<label for="info"> 输 入 最 喜欢 的 一 首 古 诗 :</1label> 
<textarea name="addinfo" id="info"></textarea> 
</div> 
<input type="submit" data-inline="true" value=" 提 交 "> 
</form> 
</div> 
</div> 
</body> 
</html> 


模拟 器 中 预览 效果 如 图 18-3 所 示 。 输 入 多 行内 容 时 ， 文 本 框 会 根据 输入 的 内 容 ， 自 动 调 


整 文本 框 的 高 度 ， 如 图 18-4 所 示 。 


站 
st 
多 行文 本 域 输入 最 喜欢 的 一 首 古诗 
大 风 歌 
输入 最 喜欢 的 一 首 古诗 : 大 风 起 全 去 飞扬 ， 
| | 威 加 海内 兮 归 故 乡 ， 
| 安 得 颖 十 信守 四 方 ! 
提交 二 


cu 398u509 ppt233 [100 ~ Ce 


图 18-3 程序 预览 效果 图 18-4 选择 日 期 
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3. 搜索 输入 框 
HTML5 中 新 增 的 type="search" 类 型 为 搜索 输入 框 ， 它 是 为 输入 搜索 定义 文本 字段 。 
搜索 输入 框 的 语法 规则 如 下 : 


<input type="search" name="search" id="search" placeholder=" 搜 索 内容 "> 
搜索 输入 框 的 效果 如 图 18-5 所 示 。 
Q 
图 18-5 搜索 输入 框 


4. 范围 滑动 条 
使 用 <input type="range"> 控 件 ， 即 可 创建 范围 滑动 条 ， 语 法 格式 如 下 : 


<input type="range" name="points" id="points" value="50" min="0" max="100" 
data-show-value="true"> 


其 中 ，max 属性 规定 允许 的 最 大 值 ，min 属性 规定 允许 的 最 小 值 ，step 属性 规定 合法 的 数 
字 间 隔 ; value 属性 规定 默认 值 ，data-show-value 属性 规定 是 否 在 按钮 上 显示 进度 的 值 ， 如 果 设 
置 为 tue， 则 表示 显示 进度 的 值 ， 如 果 设 置 为 false， 则 表示 不 显示 进度 的 值 。 


【 例 18.3】〔 实 例文 件 ，ch18\18.3.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script 
src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></scri 
pt> 
</head> 
<body> 
<div data-role="first"> 
<div data-role="header"> 
<h1> 工 作 进度 申报 </h1> 
</div> 
<div data-role="main" class="ui-content"> 
<form> 
<label for="points"> 工 作 完成 的 进度 :</label> 
<input type="range" name="points" id="points" value="50" min="0" 
max="100" data-show-value="true"> 
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<input type="submit" data-inline="true" value=" 提 交 "> 
</form> 
</div> 
</div> 
</body> 
</html> 


模拟 器 中 预览 效果 如 图 18-6 所 示 。 用 户 可 以 拖 动 滑 块 ， 选 择 需要 的 值 。 也 可 以 通过 加 减 
按钮 ， 精 确 选 择 进度 的 值 。 


Ty x 
工作 进度 申报 
工作 完成 的 进度 
50 由 50 | 
提交 


Custom 406x502 ?pb 233 Dh [100% 


图 18-6 程序 预览 效果 
使 用 data-popup-enabled 属性 可 以 设置 小 弹 窗 效果 ， 代 码 如 下 : 


<input type="range" name="points" id="points" value="50" min="0" max="100" 
data-popup-enabled="true"> 


添加 后 的 效果 如 图 18-7 所 示 。 


图 18-7 进度 值 显示 效果 


使 用 data-highlight 属性 可 以 亮度 显示 滑动 条 的 值 。 代 码 如 下 : 


<input type="range" name="points" id="points" value="50" min="0" max="100" 
data-highlight="true"> 


添加 后 的 效果 如 图 18-8 所 示 。 
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图 18-8 ”高 亮度 显示 进度 值 效果 


5. 表单 按钮 
表单 按钮 分 为 三 种 ， 普 通 按钮 ， 提 交 按 钮 和 取消 按钮 。 只 需要 在 type 属性 中 设置 表单 的 类 
型 即 可 ， 代 码 如 下 : 


<input type="submit" value=" 提 交 按 钮 "> 
<input type="reset" value=" 取 消 按钮 "> 
<input type="button" value=" 普 通 按 钮 "> 
模拟 器 中 预览 效果 如 图 18-9 所 示 。 
提交 按钮 
取消 按钮 


普通 按钮 


图 18-9 表单 按钮 预览 效果 


当 用 户 在 有 限 数 量 的 选择 中 仅 选 取 一 个 选项 时 ， 经 常用 到 表单 中 的 单 选 按钮 。 通 过 
type="radio" 来 创建 一 系列 的 单 选 按钮 ， 代 码 如 下 : 


<fieldset data-role="controlgroup"> 
<legend> 请 选择 您 的 年 级 : </legend> 
<label for="one"> 一 年 级 </label> 
<input type="radio" name="grade" id="one" value="one"> 
<label for="two"> 二 年 级 </label> 
<input type="radio" name="grade" id="two" value="two"> 
<label for="three"> 三 年 级 </label> 
<input type="radio" name="grade" id=" three" value=" three"> 
</fieldset> 


模拟 器 中 预览 效果 如 图 18-10 所 示 。 
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请 选择 您 的 年 级 : 
一 年 级 
〇 ”二 年 级 
三 年 级 


图 18-10 单 选 按钮 


提示 : <fieldsef> 标 记 用 来 创建 按钮 组 ， 组 内 各 个 组 件 保持 自己 的 功能 。 在 <fieldset> 标 记 内 
添加 data-role="controlgroup"， 这 样 这 些 单 选 按钮 样式 统一 ， 看 起 来 像 一 个 组 合 。 其 中 <legend> 
标签 来 定义 按钮 组 的 标题 

6. 复 选 框 

当 用 户 在 有 限 数量 的 选择 中 选取 一 个 或 多 个 选项 时 ， 需 要 使 用 复 选 杠 ， 代 码 如 下 


> 


<fieldset data-role="controlgroup"> 
<legend> 请 选择 您 喜爱 的 季节 : </legend> 
<label for="spring"> 春 天 </label> 
<input type="checkbox" name="season" id="spring" value="spring"> 
<label for="summer"> 揽 天 </label> 
<input type="checkbox" name="season" id="summer" value="summer"> 
<label for="fall"> 秋 天 </label> 
<input type="checkbox" name="season" id="fall" value="fall"> 
<label] for="winter"> 冬 天 </label> 
<input type="checkbox" name="season" id="winter" value="winter"> 
</fieldset> 


模拟 器 中 预览 效果 如 图 18-11 所 示 。 
请 选择 您 喜爱 的 季节 : 

回 春天 

夏天 


回 秋天 


专 天 


图 18-11 复 选 框 


6. 选择 菜单 
使 用 <select> 标 签 可 以 创建 带 有 若干 选项 的 下 拉 列 表 。<select> 标 签 内 的 <option> 属 性 定义 
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了 列表 中 的 可 用 选项 ， 代 码 如 下 : 


<fieldset data-role="fieldcontain"> 
<label for="day"> 选 择 值 日 时 间 : </label> 
<select name="day" id="day"> 
<option value="mon"> 星 期 一 </option> 
<option value="tue"> 星 期 二 </option> 
<option value="wed"> 星 期 三 </option> 
<option value="thu"> 星 期 四 </option> 
<option value="fri"> 星 期 五 </option> 
<option value="sat"> 星 期 六 </option> 
<option value="sun"> 星 期 日 </option> 
</select> 

</fieldset> 


模拟 器 中 预览 效果 如 图 18-12 所 示 。 


选择 值 日 时 间 : 星期 一 


Cm ) 


图 18-12 选择 菜单 


如 果菜 单 中 的 选项 还 需要 再 次 分 组 , 就 可 以 在 <select> 内 使 用 <optgroup> 标 签 。 添 加 后 的 代 
码 如 下 : 


<fieldset data-role="fieldcontain"> 
<label for="day"> 选 择 值 日 时 间 : </label> 
<select name="day" id="day"> 
<optgroup label=" 工 作 日 "> 
<option value="mon"> 星 期 一 </option> 
<option value="tue"> 星 期 二 </option> 
<option value="wed"> 星 期 三 </option> 
<option value="thu"> 星 期 四 </option> 
<option value="fri"> 星 期 五 </option> 
</optgroup> 
<optgroup label=" 休 息 日 "> 
<option value="sat"> 星 期 六 </option> 
<option value="sun"> 星 期 日 </option> 
</optgroup> 
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</select> 
</fieldset> 


模拟 器 中 预览 效果 如 图 18-13 所 示 。 


选择 值 日 时 间 : 工作 日 


星期 六 


图 18-13 菜单 选项 分 组 后 的 效果 
如 果 想 选择 菜单 中 的 多 个 选项 ， 就 需要 设置 <select> 标 签 的 multiple 属性 ， 设 置 代码 如 下 : 
<select name="day" id="day" multiple data-native-menu="false"> 


例如 把 上 面 的 代码 修改 如 下 : 


<fieldset data-role="fieldcontain"> 
<label for="day"> 选 择 值 日 时 间 : </label> 
<select name="day" id="day" multiple data-native-menu="false"> 
<optgroup label=" 工 作 日 "> 
<option value="mon"> 星 期 一 </option> 
<option value="tue"> 星 期 二 </option> 
<option value="wed"> 星 期 三 </option> 
<option value="thu"> 星 期 四 </option> 
<option value="fri"> 星 期 五 </option> 
</optgroup> 
<optgroup label=" 休 息 日 "> 
<option value="sat"> 星 期 六 </option> 
<option value="sun"> 星 期 日 </option> 
</optgroup> 
</select> 
</fieldset> 


模拟 器 中 预览 ， 选 择 菜单 时 的 效果 如 图 18-14 所 示 。 选 择 完成 后 ， 即 可 看 到 多 个 菜单 现象 
被 选择 ， 如 图 18-15 所 示 。 
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[x) 选择 多 个 值 日 时 间 : 


星期 四 选择 多 个 值 日 时 间 : 


星期 一 星期三, 星期 六 3@| 


图 18-14 厦门 站 多 个 菜单 选项 图 18-15 多 个 菜单 选项 被 选择 后 的 效果 


8. 翻转 波动 开关 
设置 <input type="checkbox"> 标 签 的 data-role 为 "flipswitch" 时 ， 可 以 创建 翻转 波动 开关 。 
代码 如 下 : 


<form> 
<label for="switch"> 切 换 开 关 : </label> 
<input type="checkbox" data-role="flipswitch" name="switch" 
id="switch"> 
</form> 


模拟 器 中 预览 效果 如 图 18-16 所 示 。 
同时 ， 用 户 还 可 以 使 用 "checked" 属 性 来 设置 默认 的 选项 。 代 码 如 下 : 


<input type="checkbox" data-role="flipswitch" name="switch" id="switch" 
checked> 


修改 后 预览 效果 如 图 18-17 所 示 。 


切换 开关 切换 开关 


on EE 


图 18-16 ”开关 默认 效果 图 18-17 修改 默认 选项 后 的 效果 


默认 情况 下 ， 开 关切 换 的 文本 为 "On" 和 "Off'。 可 以 使 用 data-on-text 和 data-off-text 属性 
来 修改 ， 代 码 如 下 : 


<input type="checkbox" data-role="flipswitch" name="switch" id="switch" 
data-on-text=" 打 开 " data-off-text=" 关 闭 "> 
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修改 后 预览 效果 如 图 18-18 所 示 。 


图 18-18 ”修改 切换 开关 文本 后 的 效果 


18.1.2 ”按钮 和 按钮 组 

前 面 简单 介绍 过 表单 按钮 ， 由 于 按钮 和 按钮 组 功能 变化 比较 大 ， 本 节 将 详细 讲述 它们 的 使 
用 方法 和 技巧 。 

在 jQuery Mobile 中 ， 创 建 按钮 的 方法 包括 以 下 3 种 : 


(1) 使 用 <button> 标 签 创建 普通 按钮 。 代 码 如 下 : 
<button> 按 钮 </button> 

(2) 使 用 <input> 标 签 创 建 表单 按钮 。 代 码 如 下 : 

<input type="button" value=" 按 钮 "> 

(3) 使 用 data-role="button" 属 性 创建 链接 按钮 。 代 码 如 下 : 
<a href="#" data-role="button"> 按 钮 </a> 


在 jQuery Mobile 中 ， 按 钮 的 样式 会 被 自动 添加 上 ， 为 了 让 按钮 在 移动 设备 上 更 具 吸 引力 
和 可 用 性 。 推荐 在 页 面 间 进行 链接 时 , 使 用 第 三 种 方法 ;在 表单 提交 时 , 用 第 一 种 或 第 二 种 方法 。 

默认 情况 下 ， 按 钮 占 满 整个 屏幕 宽度 。 如 果 想 要 一 个 仅 是 与 内 容 一 样 宽 的 按钮 ， 或 者 需要 
并 排 显示 两 个 或 多 个 按钮 ， 可 以 通过 设置 data-inline="true" 来 完成 。 代 码 如 下 : 


<a href="#pagetwo" data-role="button" data-inline="true"> 下 一 页 </a> 
下 面 通过 一 个 案例 来 区 别 默认 按钮 和 设置 后 按钮 的 区 别 ， 代 码 如 下 : 


【 例 18.4】〔 实 例文 件 ，ch18\18.4.html) 

<!DOCTYPE html> 

<html> 

<head> 

<meta name="viewport" content="width=device-width, initial-scale=1"> 

<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 


HTJmL5+CSS3+TjQuery Jmobile+Bootstrap 开发 APP 从 入 门 到 精通 〈 视 频 教 学 版 ) 


<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script 
src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></scri 
pt> 
</head> 
<body> 
<div data-role="page" id="first"> 
<div data-role="header"> 
<h1> 按 钮 的 区 别 </h1> 
</div> 
<div data-role="content" class="content"> 
<p> 普 通 / 默认 按钮 :</p> 
<a href="#second" data-role="button"> 下 一 页 </a> 
<p> 设 置 后 的 按钮 :</p> 
<a href="#second" data-inline="true"> 下 一 页 </a> 
<a href="#first" data-inline="true"> 上 一 页 </a> 
</div> 
<div data-role="footer"> 
<h1>2 种 按钮 </h1> 
</div> 
</div> 
</body> 
</html> 


模拟 器 中 预览 效果 如 图 18-19 所 示 。 


按钮 的 区 别 


普通 / 默认 按钮 


设置 后 的 按钮 
下 一 页 上 一 页 


图 18-19 不 同 的 按钮 的 效果 


jQuery Mobile 提供 了 一 个 简单 的 方法 来 将 按钮 组 合 在 一 起 。 使 用 data-role="controlgroup" 
属性 即 可 通过 按钮 组 来 组 合 按钮 。 同 时 使 用 data-type="horizontallvertical" 属 性 来 设置 按钮 的 排 
列 方 式 是 水 平 还 是 垂直 。 


【 例 18.5】 (实例 文件 : ch18\18.5.html) 


<!DOCTYPE html> 

<html> 

<head> 

<meta name="viewport" content="width=device-width, initial-scale=1"> 


jQuery Mobile UI 组件 第 18 和 这 


<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script 
src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></scri 
pt> 
</head> 
<body> 
<div data-role="page" id="first"> 
<div data-role="header"> 
<h1> 组 按钮 的 排列 </h1> 
</div> 
<div data-role="content" class="content"> 
<div data-role="controlgroup" data-type="horizontal"> 
<p> 水 平 排列 的 按钮 :</p> 
<a href="#" data-role="button"> 按 钮 a</a> 
<a href="#" data-role="button"> 按 钮 p</a> 
<a href="#" data-role="button"> 按 钮 c</a> 
</div><br> 
<div data-role="controlgroup" data-type="vertical" 
<p> 垂 直 排 列 的 按钮 :</p> 
<a href="#" data-role="button"> 按 钮 a</a> 
<a href="#" data-role="button"> 按 钮 b </a> 
<a href="#"” data-role="button"> 按 钮 c</a> 
</div> 
</div> 
<div data-role="footer"> 
<h1>2 种 排列 方式 </h1> 
</div> 
</div> 
</body> 
</html> 


模拟 器 中 预览 效果 如 图 18-20 所 示 。 


组 按钮 的 排列 


水 平 排列 的 按钮 : 


按钮 a ”按钮 b ”按钮 


垂直 排列 的 按钮 : 
按钮 a 
按钮 b 
按钮 c 


图 18-20 不 同 排列 方式 的 按钮 组 
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18.1.3 ”按钮 图 标 


jQuery Mobile 提供 了 一 套 丰富 多 彩 的 按钮 图 标 ， 用 户 只 需要 使 用 data-icon 属性 即 可 添加 
按钮 图 标 ， 常 用 的 图 标 样式 如 表 18.1 所 示 。 


表 18.1 常用 的 按钮 图 标 样式 


图 标 参数 外 观 样式 说 明 
data-icon="arrowW-l" 左 得 头 左 箭头 
data-icon="arrow-r" 右 新 头 右 箭头 
data-icon="arrow-u" 上 条 头 上 箭头 
data-icon="arrow-d" 下 前 头 下 箭头 
data-icon="info" 信息 信息 
data-icon="plus" 加 号 加 号 
data-icon="minus" 并 号 减 号 
data-icon="check" 复 先 复 选 
data-icon="refresh" 重新 玫 理 重新 整理 
data-icon="delete" 开除 删除 
data-icon="forward" 的 进 前 进 
data-icon="back" 后 旭 后 退 
data-icon="star" 县 形 星 号 
data-icon="audio" 扬声器 扬声器 
data-icon="]ock" 挂 负 挂 锁 
data-icon="search" 搜索 搜索 
data-icon="alert" 到 告 告 
data-icon="grid" 网 格 网 格 
data-icon="home" 首页 主页 


例如 以 下 代码 : 


<a href="#" data-role="button" 
<a href="#" data-role="button" 
<a href="#" data-role="button™" 
<a href="#" data=role="batton” 


模拟 器 中 预览 效果 如 


图 18-21 所 示 。 


data-icon="lock"> 挂 锁 </a> 
data-icon="check"> 复 选 </a> 
data-icon="refresh"> 重 新 整理 </a> 
data-icon="delete"> 删 除 </a> 
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© 挂 锁 
© 复 选 
© 重新 整理 
© 删除 


图 18-21 按钮 图 标 效 果 


细心 的 读者 会 发 现 ， 按钮 上 的 图 标 默认 情况 下 会 出 现在 按钮 的 左边 。 如果 需要 设置 图 标的 
位 置 , 可 以 设置 data-iconpos 属性 来 指定 位 置 , 包括 top (顶部) 、right ( 右 侧 ) bottom (底部 ) 。 
例如 以 下 代码 : 


<a href="#" data-role="button" data-icon="refresh"> 重 新 整理 </a> 

<a href="#" data-role="button" data-icon="refresh" data-iconpos="top"> 重 
新 整理 </a> 

<a href="#" data-role="button" data-icon="refresh" data-iconpos="right"> 
重新 整理 </a> 

<a href="#" data-role="button" data-icon="refresh" data-iconpos="bottom"> 


重新 整理 </a> 


模拟 器 中 预览 效果 如 图 18-22 所 示 。 


图 18-22 设置 图 标的 位 置 


号. 如 果 不 想 让 按钮 上 出 现 文字 ， 就 可 以 将 data-iconpos 属性 设置 为 notext， 这 样 只 会 
ET 本 显示 按钮 而 没有 文字 。 


18.1.4 ” 弹 窗 
弹 窗 是 一 个 非常 流行 的 对 话 框 ， 弹 窗 可 以 覆盖 在 页 面 上 展示 。 弹 窗 可 用 于 显示 一 段 文本 ， 


图 片 ， 地 图 或 其 他 内 容 。 创 建 一 个 弹 窗 ， 需 要 使 用 <a> 和 <div> 标 签 。 在 <a> 标 签 上 添加 
data-rel="popup" 属 性 ，<div> 标 签 添加 data-role="popup" 属 性 。 然 后 为 <div> 设 置 id， 设 置 <a> 的 
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href 值 为 <div> 指 定 的 这 ， 其 中 <div> 中 的 内 容 为 弹 窗 显示 的 内 容 。 代 码 如 下 ;: 


<a href="#firstpp" data-rel="popup"> 显 示 弹 窗 </a> 
<div data-role="popup" id="firstpp"> 
<p> 这 是 弹出 窗口 显示 的 内 容 </p> 


</div> 


模拟 器 中 预览 效果 如 图 18-23 所 示 。 单 击 【 显 示 弹 窗 】 即 可 显示 弹出 窗口 的 内 容 。 
显示 弹 窗 这 是 弹出 窗口 显示 的 内 容 
图 18-23 弹 窗 效果 
注意 : <div> 弹 窗 与 点 击 的 <a> 链 接 必 须 在 同一 个 页 面 上 。 


默认 情况 下 ， 点 击 弹 窗 之 外 的 区 域 或 按 下 【Esc】 键 即 可 关闭 弹 窗 。 用 户 也 可 以 在 弹 窗 上 
添加 关闭 按钮 ， 只 需要 设置 属性 data-rel="back" 即 可 ， 结 果 如 果 18-24 所 示 。 


思 
这 是 弹出 窗口 显示 的 内 容 


图 18-24 ” 带 关闭 按钮 的 弹 窗 效果 
用 户 还 可 以 在 弹 窗 中 显示 图 片 。 代 码 如 下 : 


<div id="pageone" data-role="content" class="content" > 
<p> 单 击 下 面 的 小 图 片 </p> 
<a href="#firstpp" data-rel="popup" > 
<img src="123.jpeg" style="width:200px;"></a> 
<div data-role="popup" id="firstpp"> 
<p> 这 是 我 的 图 片 ! </p> 
</a><img src="123.jpeg" style="width:500px;height:500px;" > 
</div> 

</div> 


模拟 器 中 预览 效果 如 图 18-25 所 示 。 单 击 图 片 ， 即 可 弹出 如 图 18-26 所 示 的 图 片 弹 窗 。 


单 击 下 面 的 下 图 片 


图 18-25 ”模拟 器 中 预览 效果 图 18-26 图 片 弹 窗 效 果 
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18.2 列表 


因为 移动 设备 屏幕 比较 小 , 所 以 常常 以 列表 的 形式 显示 数据 。 本 章节 将 学 习 列 表 的 使 用 方 
法 和 技巧 。 


18.2.1 列表 视图 


jQuery Mobile 中 的 列表 视图 是 标准 的 HTML 列表 ， 包 括 有 序列 表 <ol> 和 无 序列 表 <ul>。 
列表 视图 是 jQuery Mobile 中 功能 强大 的 一 个 特性 。 它 会 使 标准 的 无 序 或 有 序列 表 应 用 更 广泛 。 

列表 的 使 用 方法 非常 简单 ,只 需要 在 <ul> 或 <ol> 标 签 中 添加 属性 data-role="listview"。 每 个 
项 目 (<li>) 中 可 以 添加 链接 。 下 面 通 过 一 个 案例 来 学 习 。 


【 例 18.6】〔 实 例文 件 : ch18\18.6.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script 
src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></scri 
pt> 
</head> 
<body> 
<div data-role="page" id="first"> 
<div data-role="header"> 
<h1> 列 表 视 图 </h1> 
</div> 
<div data-role="content" class="content"> 
<h2> 有 序列 表 : </h2> 
<ol data-role="listview"> 
<1i><a href="#"> 香 燕 </a></1i> 
<1i><a href="#"> 橘 子 </a></1i> 
<1i><a href="#"> 苹 果 </a></1i> 
</ol> 
<h2> 无 序列 表 : </h2> 
<ul data-role="listview"> 
<1i><a href="#"> 芹 菜 </a></1i> 
<1i><a href="#"> 韭 菜 </a></1i> 
<1i><a href="#"> 菠 菜 </a></1i> 
</ul> 
</div> 
</div> 
<div data-role="footer"> 
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<h1> 有 序列 表 和 无 序列 表 </h1> 
</div> 
</div> 
</body> 
</html> 


模拟 器 中 预览 效果 如 图 18-27 所 示 。 


列表 视图 


训 
ed 
© 


3 草 果 © 
无 序列 表 

请 这 © 
ER © 
邢 菜 © 


图 18-27 有 序列 表 和 无 序列 表 
”小 | 时 认 情 况 下 ， 列表 项 的 链接 会 自动 变 成 一 个 按钮 ， 此 时 不 再 需要 使 用 
CT data-role="button" 属 性 。 


从 结果 可 以 看 出 ， 列 表 样 式 中 没有 边缘 和 圆 角 效果 ， 这 里 可 以 通过 设置 属性 
data-inset="true" 来 完成 ， 代 码 如 下 : 


<ul data-role="listview" data-inset="true"> 


上 面 案 例 的 部 分 代码 修改 如 下 : 


<div data-role="content" class="content"> 
<h2> 标 准 列 表 样式 : </h2> 
<ol data-role="listview"> 
<1i><a href="#"> 香 燕 </a></1i> 
<1i><a href="#"> 橘 子 </a></1i> 
<1i><a href="#"> 芋 果 </a></1i> 
</o1> 
<h2> 添 加 data-inset="true" 属 性 后 的 样式 : </h2> 
<ul data-role="listview" data-inset="true"> 
<1i><a href="#"> 芹 菜 </a></1i> 
<1i><a href="#"> 韭 菜 </a></1i> 
<1i><a href="#"> 菠 菜 </a></1i> 
</ul> 
</div> 
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模拟 器 中 预览 效果 如 图 18-28 所 示 。 


标准 列表 样式 : 

1 自卫 © 
2 枉 子 © 
3 革 果 © 
添加 data-inset="true" 属 性 后 的 样式 : 

并 荣 © 
拧 © 
浇 荣 © 


图 18-28 ”有 边缘 和 圆 角 的 列表 效果 


如 果 列 表 项 比较 多 ,用户 可 以 使 用 列表 分 割 项 对 列表 进行 分 组 操作 ， 这 样 使 列表 看 起 来 更 
整齐 。 通 过 在 列表 项 <li> 标 签 中 添加 data-role="list-divider" 属性 即 可 指定 列表 分 割 ， 例 如 以 下 
代码 : 


<ul data-role="listview"> 

<li data-role="]ist-divider"> 蔬 菜 </1i> 
<1i><a href="#"> 瞩 菜 </a></1i> 
<1i><a href="#"> 韭 菜 </a></1i> 

<li data-role="]list-divider"> 水 果 </1i> 
<1i><a href="#"> 苹 果 </a></1i> 
<1i><a href="#"> 橘 子 </a></1i> 

<1li data-role="1ist-divider"> 乳 制品 </1i> 
<1i><a href="#"> 酸 奶 </a></1i> 

<1i><a href="#"> 奶 酪 </a></1i> 

</ul> 


模拟 器 中 预览 效果 如 图 18-29 所 示 。 


图 18-29 对 项 目 进行 分 割 后 的 效果 


HTJmL5+CSS3+TjQuery Jmobile+Bootstrap 开发 APP 从 入 门 到 精通 〈 视 频 教 学 版 ) 


如 果 项 目 列表 是 一 个 按 字 母 顺序 排列 的 列表 , 通过 添加 data-autodividers="true" 属 性 ,可 以 
动 生成 项 目的 分 割 ， 代 码 如 下 : 


<ul data-role="listview" data-autodividers="true"> 
<li><a href="#">Avocado</a></1i> 
<li><a href="#"> Apricot</a></1i> 
<li><a href="#">Banana</a></1i> 
<li><a href="#">Bramley</a></1i> 
<li><a href="#"> Cherry </a></1i> 
</ul> 


模拟 器 中 预览 效果 如 图 18-30 所 示 。 从 结果 可 以 看 出 ， 创 建 的 分 隔 文本 是 列表 项 文本 的 第 
一 个 大 写字 母 ， 


A 
Avocado Es 
Apricot © 
B 

Banana [> 
Bramley [>) 
c 

Cherry © 


图 18-30 自动 生成 分 割 后 的 效果 


18.2.2 ”列表 内 容 


在 列表 内 容 中 ， 既 可 以 添加 图 片 和 说 明 、 也 可 以 添加 计数 泡 泡 ， 同 时 还 能 拆 分 按钮 和 列表 
的 链接 。 

1. 加 入 图 片 和 说 明 

前 面 做 的 案例 中 ， 列 表 项 目前 没有 图 片 或 说 明 。 下 面 来 讲述 如 何 添加 图 片 和 说 明 ， 代 
码 如 下 : 

<1i> 

<a href="#"> 

<img src="124.jpg"> 

<h3> 香 燕 </h3> 

<p> 香 敬 的 原 产地 是 东南 亚 </p> 


</a> 
</1i> 


模拟 器 中 预览 效果 如 图 18-31 所 示 。 
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~ © 


香 燕 的 原 产 地 是 东南 亚 


图 18-31 加 入 图 片 和 说 明 
2. 计 入 计数 泡 泡 
计数 泡 泡 主要 是 在 列表 中 显示 数字 时 使 用 ， 只 需要 在 <li> 标 签 加 入 以 下 标签 即 可 。 
<span class="ui-1i-count"> 数 字 </span> 
例如 下 面 的 例子 : 


< 

<a href="#"> 

<img src="124.jpg"> 

<h3> 香 欧 </h3> 

<p> 香 藻 的 原 产地 是 东南 亚 </p> 

<span class="ui-li-count">111</span> 
</a> 

> 


模拟 器 中 预览 效果 如 图 18-32 所 示 。 


Ng 


香 蒸 的 原 产地 是 东南 亚 


图 18-32 ”加 入 计数 泡 泡 


3. 拆 分 按钮 和 列表 的 链接 

默认 情况 下 ， 单 击 列表 项 或 按钮 ， 都 是 转向 同一 个 链接 。 用 户 也 可 以 拆 分 按钮 和 列表 项 的 
链接 ， 这 样 单 击 按钮 和 列表 项 时 ， 会 转向 不 同 的 链接 。 设 置 方法 比较 简单 ， 值 需要 在 <li> 标 签 
中 加 入 两 组 <a> 标 签 即 可 。 

例如 : 


<1i> 

<a href="122.html"> 

<img src="124.jpg"> 

<h3> 香 菩 </h3> 

<p> 香 药 的 原 产 地 是 东南 亚 </p> 

</a> 

<a href="123 .html data-icon="star"></a> 
</1i> 
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模拟 器 中 预览 效果 如 图 18-33 所 示 。 


Na 全 © 


香 燕 的 原 产 地 是 东南 亚 


图 18-33 ” 拆 分 按钮 和 列表 的 链接 


18.2.3 ”列表 过 滤 


在 jQuery Mobile 中 ， 用 户 可 以 对 列表 项 目 进行 搜索 过 滤 。 添 加 过 滤 效 果 的 思路 如 下 : 
(1) 创建 一 个 表单 ， 并 添 ie 该 类 的 作用 是 自动 调整 搜索 字段 与 过 滤 元 素 
的 外 边 距 。 代 码 如 下 : 


<form class="ui-filterable"> 
</form> 


(2) 在 <form> 标 签 内 创建 一 个 <input> 标 签 ， 并 添加 data-type="search" 属 性 ， 并 指定 id， 
从 而 创建 基本 的 搜索 字段 。 代 码 如 下 : 


<form class="ui-filterable"> 
<input id="myFilter" data-type="search"> 
</form> 


(3) 为 过 滤 的 列表 添加 data-input 属性 ， 该 值 为 <input> 标 签 的 i4， 代 码 如 下 : 
<ul data-role="listview" data-filter="true" data-input="#myFilter"> 
下 面 通过 一 个 案例 来 理解 列表 是 如 何 过 滤 的 。 


【 例 18.7】 实例 文件 ，ch18\18.7.html) 


<!DOCTYPE html> 

<html> 

<head> 

<meta name="viewport" content="width=device-width, initial-scale=1"> 

<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 

<script 
src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></scri 
pt> 

</head> 

<body> 

<div data-role="page" id="first"> 

<div data-role="content" class="content"> 
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<h2> 进 货 商 联系 表 </h2> 
<form> 
<input id="myFilter" data-type="search"> 
</form> 
<ul data-role="listview" data-filter="true" data-input="#myFilter"> 
<1i><a href="#"> 张 小 名 </a></1i> 
<1i><a href="#"> 刘 名 园 </a></1i> 
<1i><a href="#"> 刘 鲁 鹏 </a></1i> 
<1i><a href="#"> 张 鹏 举 </a></1i> 
<1i><a href="#"> 张 鹏 远 </a></1i> 
</ul> 
</div> 
</div> 
</body> 
</html> 


模拟 器 中 预览 效果 如 图 18-34 所 示 。 输入 需要 过 滤 的 关键 字 , 例如 这 
结果 如 图 18-35 所 示 。 


Hm 


有 搜索 姓 张 的 进货 商 ， 


进货 商 联 系 表 


图 18-34 程序 预览 效果 图 18-35 列表 过 滤 后 的 效果 


提示 : 如 果 需 要 在 搜索 框 内 添加 提示 信息 ， 就 可 以 通过 设置 placeholder 属性 来 完成 。 代 码 
如 下 : 


<input id="myFilter" data-type="search"” placeholder=" 请 输入 联系 人 的 姓 "> 


18.3 面板 和 可 折 又 块 


在 jQuery Mobile 中 ， 可 以 通过 面板 或 可 折合 块 来 隐藏 或 显示 指定 的 内 容 。 本 章节 将 重点 
学 习 面 板 和 可 折合 块 的 使 用 方法 和 技巧 。 


18.3.1 面板 


jQuery Mobile 中 可 以 添加 面板 ， 面 板 会 在 屏幕 上 从 左 到 右 划 出 。 通 过 为 <div> 标 签 添加 
data-role="panel" 属 性 来 创建 面板 。 有 具体 思路 如 下 : 
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(1) 通过 <div> 标 签 来 定义 面板 的 内 容 ， 并 定义 id 属性。 例如 : 


<div data-role="panel" id="myPanel"> 
<h2> 长 恨 歌 </h2> 
<p> 天 生 丽 质 难 自 弃 ， 一 朝 选 在 君王 侧 。 回 眸 一 笑 百 媚 生 ， 六 宫 粉 念 无 颜色 。</p> 


</div> 


注意 ， 定 义 的 面板 内 容 必须 置 于 头 部 、 内 容 和 底部 组 成 的 页 面 之 前 或 之 后 。 


(2) 要 访问 面板 , 需要 创建 一 个 指向 面板 <div> 的 链接 ， 单 击 该 链接 即 可 打开 面板 。 例 如: 
<a href="#myPanel" class="ui-btn ui-btn-inline"> 最 喜欢 的 诗句 </a> 


【 例 18.8】〔 实 例文 件 :， ch18\18.8.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script 
src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></scri 
pt> 
</head> 
<body> 
<div data-role="first"> 
<div data-role="panel" id="myPanel"> 
<h2> 长 恨 歌 </h2> 
<p> 天 生 丽 质 难 自 弃 ， 一 朝 选 在 君王 侧 。 回 眸 一 笑 百 媚 生 ， 六 宫 粉 黛 无 颜色 。</P> 
</div> 
<div data-role="header"> 
<h1> 使 用 面板 </h1> 
</div> 
<div data-role="content" class="content"> 
<a href="#myPanel" class="ui-btn ui-btn-inline"> 最 喜欢 的 诗句 </a> 
</div> 
</div> 
</body> 
</html> 


模拟 器 中 预览 效果 如 图 18-36 所 示 。 单 击 【 最 喜欢 的 诗句 】 链 接 ， 即 可 打开 面板 ， 结 果 如 
图 18-37 所 示 。 
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使 用 面板 
长 恨 歌 
最 喜欢 的 诗句 天 生 丽 质 难 自 弃 ， 一 朝 选 在 君王 
侧 。 回 眸 一 笑 百 媚 生 ， 六 宫 粉 车 无 
颜色 。 
图 18-36 ”程序 预览 效果 图 18-37 打开 面板 


板 的 展示 方式 有 属性 data-display 来 控制 ， 分 为 以 下 三 种 : 


(1) data-display="reveal": 面板 的 展示 方式 为 从 左 到 右 划 出 ， 这 是 面板 展示 方式 的 默认 值 。 
(2) data-display="overlay": 在 内 容 上 显示 面板 。 
(3) data-display="push": 同时 "推动 "面板 和 页 面 。 


这 三 种 面板 展示 方式 的 代码 如 下 : 


<div data-role="panel" id="overlayPanel" data-display="overlay"> 
<div data-role="panel" id="revealPanel" data-display="reveal"> 
<div data-role="panel" id="pushPanel" data-display="push"> 


默认 情况 下 ， 面 板 会 显示 在 屏幕 的 左 侧 。 如 果 想 让 面板 出 现在 屏幕 的 右 侧 ， 可 以 指定 
data-position='right" 属性 。 


<div data-role="panel" id="myPanel" data-position="right"> 


默认 情况 下 ， 面 板 是 随 着 页 面 一 起 滚动 的 。 如 果 你 需要 实现 面板 内 容 固定 不 随 页 面 滚动 而 
滚动 ， 可 以 在 面板 添加 the data-position-fixed="true" 属 性 。 代 码 如 下 : 


<div data-role="panel" id="myPanel" data-position-fixed="true"> 


18.3.2 ”可 折 又 块 


通过 可 折 熏 块 ， 用 户 可 以 隐藏 或 显示 指定 的 内 容 ， 这 对 于 存储 部 分 信息 很 有 用 。 

创建 可 折 苞 块 的 方法 比较 简单 ， 只 需要 在 <div> 标 签 添加 data-role="collapsible" 属性 即 可 ， 
添加 标题 标签 为 Hl1-H6， 后 面 即 可 添加 隐藏 的 信息 。 

<div data-role="collapsible"> 

<h1> 折 县 块 的 标题 </h1> 

<p> 可 折 对 的 具体 内 容 。</p> 


</div> 


“409* 
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【 例 18.9】“〈 实 例文 件 : ch18\18.9.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script 
src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></scri 
pt> 
</head> 
<body> 
<div data-role="first"> 
<div data-role="header"> 
<h1> 可 折 倒 块 </h1> 
</div> 
<div data-role="content" class="content"> 
<div data-role="collapsible"> 
<h1> 最 喜欢 的 水 果 </h1> 
<p> 香 药 、 权 子 、 蕴 果 </p> 
</div> 
</div> 
</div> 
</body> 
</html> 


模拟 器 中 预览 效果 如 图 18-38 所 示 。 单 击 【 最 喜欢 的 水 果 】 按 钮 ， 即 可 打开 可 折 释 块 ， 结 
果 如 图 18-39 所 示 。 


可 折 玻 块 可 折 又 块 
人 最 喜欢 的 水 果 | 全 最 喜欢 的 水 果 
香 共 、 橘 子 、 苹 果 
图 18-38 程序 预览 效果 图 18-39 打开 可 折 倒 块 


| 小 | 默认 情况 下 ， 内 容 是 被 折 生 起 来 的 。 如 需 在 页 面 加 载 时 展开 内 容 ， 可 以 添加 
ET 二 本 data-collapsed="false" 属 性 ， 代 码 如 下 : 
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<div data-role="collapsible" data-collapsed="false"> 
<h1> 折 疮 块 的 标题 </h1> 
<p> 这 里 显示 的 内 容 是 展开 的 </p> 


</div> 
可 折 苇 块 是 可 以 嵌 套 的 ， 例 如 以 下 代码 : 


<div data-role="collapsible"> 
<h1> 全 部 智能 商品 </h1> 

<div data-role="collapsible"> 
<h1> 智 能 家 居 </h1> 

<p> 智 能 办 公 、 智 能 厨 电 和 智能 网 络 </P> 
</div> 

</div> 


模拟 器 中 预览 效果 如 图 18-40 所 示 。 
全 全 部 智能 商品 


手机 及 配件 
智能 穿戴 


同 智能 家 居 


智能 办 公 、 智 能 司 电 和 智能 网 络 


图 18-40 程序 预览 效果 


18.4 “导航 条 


导航 条 通常 位 于 页 面 的 头 部 或 尾部 ， 主 要 作用 是 便于 用 户 快速 访问 需要 的 页 面 。 本 章节 将 
重点 学 习 导 航 条 的 使 用 方法 和 技巧 。 
在 jQuery Mobile 中 ， 使 用 data-role="navbar" 属性 来 定义 导航 栏 。 需 要 特别 注意 的 是 ， 导 
航 栏 中 的 链接 将 自动 变 成 按钮 ， 不 需要 使 用 data-role="button" 属 性 。 
例如 以 下 代码 : 
<div data-role="header"> 
<h1> 鸿 镶 网 购 平台 </h1> 
<div data-role="navbar"> 
<ul> 
<1i><a href="#"> 主 页 </a></1i> 


<1i><a href="#"> 团 购 </a></1i> 
<1i><a href="#"> 搜 索 商 品 </a></1i> 


< 
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</ul> 
</div> 
</div> 


模拟 器 中 预览 效果 如 图 18-41 所 示 。 


鸿 名 网 购 平台 
主页 国 赂 


图 18-41 程序 预览 效果 
通过 前 


章节 的 学 习 ， 用 户 还 可 以 为 导航 添加 按钮 图 标 ， 例 如 以 上 代码 修改 如 下 : 


<div data-role="header"> 
<h1> 鸿 锥 网 购 平台 </h1> 
<div data-role="navbar"> 
<ul> 


<li><a href="#" data-icon="home"> 主 页 </a></1i> 


<li><a href="#" data-icon="arrow-d"> 团 购 </a></1i> 


<1i><a href="#" data-icon="search"> 搜 索 商品 </a></1i> 
</ul> 


</div> 
</div> 


模拟 器 中 预览 效果 如 图 18-42 所 示 。 


图 18-42 ”程序 预览 效果 


细心 的 读者 会 发 现 ， 导 航 按钮 的 图 标 默 认 位 置 是 位 于 文字 的 上 方 ， 这 个 普通 的 按钮 图 片 是 
不 一 样 的 。 如 果 需 要 修改 导航 按钮 图 标的 位 置 ， 可 以 通过 设置 data-iconpos 属性 来 指定 位 置 ， 
包括 left ( 左 侧 ) 、right ( 右 侧 ) bottom (底部 ) 。 


例如 下 面 修改 导航 按钮 图 标的 位 置 为 文本 的 左 侧 ， 代 码 如 下 : 


<div data-role="header"> 


<h1> 鸿 瞪 网 购 平台 </h1> 
<div data-role="navbar" data-iconpos="left"> 
<ul> 
<1i><a href="#" data-icon="home"” > 主页 </a></1i> 
<1i><a href="#" data-icon="arrow-d"” > 团购 </a></1i> 


<1i><a href="#"” data-icon="search"> 搜 索 商 品 </a></1i> 
</ul> 


</div> 
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</div> 


模拟 器 中 预览 效果 如 图 18-43 所 示 。 


© 主页 个 国史 QQ 。。 搜 索 酚 品 


图 18-43 程序 预览 效果 


注意 ， 和 设置 普通 按钮 图 标 位 置 不 同 的 是 ， 这 里 data-iconpos="left" 属 性 只 能 添加 到 <div> 
标签 中 ， 而 不 能 添加 到 <l 这 标签 中 ， 否 则 是 无 效 的 ， 读 者 可 以 自行 检测 。 

默认 情况 下 ， 当 单 击 导航 按钮 时 ， 按 钮 的 样式 会 发 生变 换 ， 例 如 这 里 单 击 【 搜 索 商 品 】 导 
航 按钮 ， 发 现 按钮 的 底 纹 颜色 变 成 了 蓝 色 ， 如 图 18-44 所 示 。 


图 18-44 ”导航 按钮 的 样式 变化 


如 果 用 户 想 取消 上 面 的 样式 变化 , 可 以 添加 class="ui-btn-active" 属 性 即 可 , 例如 以 下 代码 : 
<li><a href="#anylink" class="ui-btn-active"> 首 页 </a></1i> 


修改 完成 后 ， 再 次 单 击 【首页 】 导 航 按钮 时 ， 样 式 不 会 发 生变 化 。 
对 于 多 个 页 面 的 情况 ， 往 往 用 户 希望 显示 哪个 页 面 ， 对 应 导航 按钮 处 于 被 选中 状态 ， 下 面 
通过 一 个 案例 来 讲解 。 


【 例 18.10】 《实例 文件 : chl8\18.10.html) 


<!DOCTYPE html> 

<html> 

<head> 

<meta name="viewport" content="width=device-width, initial-scale=1"> 

<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 

<script 
src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></scri 
pt> 

</head> 

<body> 

<div data-role="page" id="first"> 
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<div data-role="header"> 
<h1> 鸿 状 购 物 平 台 </h1> 
<div data-role="navbar"> 
<ul> 
<li><a href="#" class="ui-btn-active ui-state-persist"> 主 页 
</a></1i> 
<1i><a href="#second"> 团 购 </a></1i> 
<1i><a href="#"> 搜 索 商 品 </a></1i> 
</ul> 
</div> 
</div> 
<div data-role="content" class="content"> 
<p> 这 里 是 首页 显示 的 内 容 </p> 
</div> 
<div data-role="footer"> 
<h1> 首 页 </h1> 
</div> 
</div> 


<div data-role="page" id="second"> 
<div data-role="header"> 
<h1> 鸿 秽 购 物 平台 </h1> 
<div data-role="navbar"> 
<ul> 
<1i><a href="#first"> 主 页 </a></1i> 
<li><a href="#" class="ui-btn-active ui-state-persist"> 团 购 
</a></1i> 
<1i><a href="#"> 搜 索 商 品 </a></1i> 
</ul> 
</div> 
</div> 
<div data-role="content" class="content"> 
<p> 这 里 是 团购 显示 的 内 容 </p> 
</div> 
<div data-role="footer"> 
<h1> 团 购 页 面 </h1> 
</div> 
</div> 
</body> 
</html> 


模拟 器 中 预览 效果 如 图 18-45 所 示 。 此 时 默认 显示 首页 的 内 容 ，【 主 页 】 导 航 按钮 处 于 选 
中 状态 。 切 换 到 团购 页 面 后 ，【 团 购 】 导 航 按钮 处 于 选中 状态 ， 如 图 18-46 所 示 。 
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鸿 扒 购物 平台 鸿 名 购物 平台 
om ae 
这 里 是 首页 显示 的 内 容 
首页 
图 18-45 程序 预览 效果 图 18-46 【团购 】 导 航 按钮 处 于 选中 状态 


18.5 ”jQuery Mobile 主题 


用 户 在 设计 移动 网 站 时 往往 需要 配置 背景 颜色 、 导 航 颜 色 、 布 局 颜色 等 ， 这 些 工 作 是 非常 
费时 的 。 为 此 ，jQuery Mobile 提供 了 两 种 不 同 的 主题 样式 ， 每 种 主题 颜色 的 按钮 、 导 航 、 内 容 
等 颜色 都 是 配置 好 的 ， 效 果 也 不 相同 。 

这 两 种 主题 分 别 为 a 和 b， 通 过 设置 data-theme 属性 来 引用 主题 a 或 b， 代 码 如 下 : 


<div data-role="page" id="first" data-theme="a"> 
<div data-role="page" id="first" data-theme="b"> 


1. 主题 a 
页 面 为 灰色 背景 、 黑 色 文 字 ;， 头 部 与 底部 均 为 灰色 背景 、 黑 色 文字 ， 按钮 为 灰色 背景 、 黑 
色 文字 ; 激活 的 按钮 和 链接 为 白色 文本 、 蓝 色 背 景 ，input 输入 框 中 placeholder 属性 值 为 浅 灰 
色 ，value 值 为 黑色 。 

下 面 通过 一 个 案例 来 讲解 主题 a 的 样式 效果 。 


【 例 18.11】〔 实 例文 件 ，ch18\18.11.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script 
src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></scri 
pt> 
</head> 
<body> 
<div data-role="page" id="first" data-theme="a"> 
<div data-role="header"> 
<h1> 古 诗 鉴赏 </h1> 
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</div> 


<div data-role="content " class="content"> 
<P> 秋 风 起 今 白云 K， 草 木 黄 落 今 雁 南 归 。 兰 有 秀 今 菊 有 芳 ， 怀 佳人 今 不 能 忘 。 泛 楼 船 今 济 汾 
河 ， 横 中 流 分 扬 素 波 。</p> 


<a href=" 井 "> 秋风 辞 </a> 
<a href="#"” class="ui-btn"> 更 多 古诗 </a> 
<p> 唐 诗 :</p> 


<ul data-role="listview" data-autodividers="true" data-inset="true"> 
<1i><a href="#"> 将 进 酒 </a></1i> 
<1i><a href="#"> 春 望 </a></1i> 

</ul> 

<label for="fullname"> 请 输入 喜欢 诗 的 名 字 :</1label> 
<input type="text" name="fullname" id="fullname" placeholder=" 诗 词 名 


<label for="switch"> 切 换 开 关 :</label> 
<select name="switch" id="switch" data-role="slider"> 
<option value="on">On</option> 
<option value="off" selected>0ff</option> 
</select> 
</div> 


<div data-role="footer"> 
<h1> 经 典 诗歌 </h1> 
</div> 
</div> 
</body> 
</html> 


主题 a 的 样式 效果 如 图 18-47 所 示 。 


古诗 鉴赏 


秋风 起 人 白云 飞 ， 草木 疯 落 合 雁 南 归 。 兰 有 秀 兮 菊 有 芳 ， 怀 佳人 
全 不 能 忘 。 泛 楼 朋 台 济 汾 河 ， 横 中 流 全 扬 京 波 。 


更 多 古诗 


图 18-47 ”主题 a 样式 效果 
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2. 主题 b 

页 面 为 黑色 背景 、 白 色 文 字 ; 头 部 与 底部 均 为 黑色 背景 、 白 色 文字 ; 按钮 为 白色 文字 、 木 
炭 背 景 ; 激活 的 按钮 和 链接 为 白色 文本 、 蓝 色 背 景 , input 输入 框 中 placeholder 性 值 为 浅 灰色 、 
value 值 为 白色 。 

为 了 对 比 主题 a 的 样式 效果 ， 请 将 上 面 案例 的 中 代码 : 


<div data-role="page" id="first" data-theme="a"> 
修改 如 下 : 
<div data-role="page" id="first" data-theme="a"> 


主题 b 的 样式 效果 如 图 18-48 所 示 。 


兮 菊 有 芳 , 怀 佳人 


切换 开关 


Of 


图 18-48 ”主题 b 样式 效果 


主题 样式 a 和 ob 不 仅仅 可 以 应 用 到 页 面 ， 也 可 以 单独 地 应 用 到 页 面 的 头 部 、 内 容 、 底 部 、 
导航 条 、 按 钮 、 面 板 、 列 表 、 表 单 等 元 素 上 。 
例如 ， 将 主题 样式 b 添加 到 页 面 的 头 部 和 底部 ， 代 码 如 下 : 


<div data-role="header" data-theme="b"></div> 
<div data-role="footer" data-theme="b"></div> 


将 主题 样式 b 添加 到 对 话 框 的 头 部 和 底部 ， 代 码 如 下 : 


<div data-role="page" data-dialog="true" id="second"> 
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<div data-role="header" data-theme="b"></div> 
<div data-role="footer" data-theme="b"></div> 
</div> 


将 主题 样式 b 添 加 到 按钮 上 时 ,需要 使 用 class="ui-btn- alb "来 设置 按钮 颜色 为 灰色 或 黑色 。 
例如 ， 将 样式 b 的 样式 应 用 到 按钮 上 ， 代 码 如 下 : 


<a href="#"” class="ui-btn"> 灰 色 按 钮 (默认) </a> 
<a href="#" class="ui-btn ui-btn-b"> 黑 色 按 钮 </a> 


预览 效果 如 图 18-49 所 示 。 


灰色 按钮 (默认 ) 


黑色 按钮 


图 18-49 ”按钮 添加 主题 后 的 效果 
在 弹 窗 上 应 用 主题 样式 的 代码 如 下 : 
<div data-role="popup" id="myPopup" data-theme="b"> 
在 头 部 和 底部 的 按钮 上 也 可 以 添加 主题 样式 ， 例 如 以 下 代码 : 


<div data-role="header"> 
<a href="#" class="ui-btn ui-btn-b"> 主 页 </a> 
<h1> 古 诗 欣 赏 </h1> 
<a href="#" class="ui-btn"> 搜 索 </a> 

</div> 


<div data-role="footer"> 
<a href="#" class="ui-btn ui-btn-b"> 上 传 古诗 图 文 </a> 
<a href="#" class="ui-btn"> 名 句 欣 赏 鉴 别 </a> 
<a href="#"” class="ui-btn ui-btn-b"> 联 系 我 们 </a> 
</div> 


预览 效果 如 图 18-50 所 示 。 


清明 时 节 雨 纷纷 ， 路 上 行人 欲 断 萄 。 借 问 酒家 何 处 有 ? 牧童 遥 指 杏 花 
村 。 


图 18-50” 头 部 和 底部 的 按钮 添加 主题 后 的 效果 
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18.6 专家 解 惑 


1. 如 何 制作 一 个 后 退 按钮 ? 
如 需 创 建 后 退 按钮 ， 请 使 用 data-rel="back" 属性 〈 这 会 忽略 锚 的 href 值 ) : 


<a href="#" data-role="button" data-rel="back"> 返 回 </a> 
2. 如 何在 面板 上 添加 主题 样式 b ? 
在 主题 上 添加 主题 样式 的 方法 比较 简单 ， 代 码 如 下 : 


<div data-role="panel" id="myPanel" data-theme="b"> 


面板 添加 主题 样式 b 后 的 效果 如 图 18-51 所 示 。 


点 击 以 下 按钮 打开 面板 。 


人 打开 面板 


图 18-51 主题 添加 主题 后 的 效果 


第 19 章 ”jQuery Mobile 事 件 


页 面 有 了 事件 就 有 了 “灵魂 ”， 可 见 事 件 对 于 页 面 是 多 么 重要 ， 这 是 因为 事件 使 页 面具 有 
了 动态 性 和 响应 性 ， 如 果 没 有 事件 将 很 难 完成 页 面 与 用 户 之 间 的 交互 。 jQuery Mobile 针对 移动 
端 提供 了 各 种 浏览 器 事件 ， 包 括 页 面 事件 、 触 摸 事 件 、 滑 动 事件 、 定 位 事件 等 。 本 章 就 来 介绍 
如 何 使 用 jQuery Mobile 的 事件 。 


19.1 页 面 事件 
jQuery Mobile 针对 各 个 页 面 生命 周期 的 事件 可 以 分 为 以 下 几 种 。 


(1) 初始 化 事件 :分别 在 页 面 初始 化 之 前 ， 页 面 创建 时 和 页 面 初始 化 之 后 触发 的 事件 。 
(2) 外 部 页 面 加 载 事件 :外 部 页 面 加 载 时 触发 事件 。 
(3) 页 面 过 渡 事件 : 页 面 过 渡 时 触发 事件 。 


使 用 jQuery Mobile 事件 的 方法 比较 简单 ， 只 需要 使 用 on() 方 法 指定 要 触发 的 时 间 并 设置 
事件 处 理 函 数 即 可 ， 语 法 格式 如 下 : 

$ (document) .on (事件 名 称 ,选择 器 , 事件 处 理 函 数 ) 

其 中 选择 器 可 选 参数 ， 如 果 省 略 该 参数 ， 表 示 事 件 应 用 于 整个 页 面 而 不 限定 哪 一 个 组 件 。 


19.1.1 初始 化 事件 

初始 化 事件 发 生 的 时 间 包 括 页 面 初始 化 之 前 、 页 面 创建 时 和 页 面 创建 后 。 下 面 将 详细 介绍 
初始 化 事件 。 

1. Mobileinit 

当 jQuery Mobile 开始 执行 时 ， 首 先 会 触发 mobileinit 事件 。 如 果 想 更 改 jQuery Mobile 的 
默认 值 时 ， 就 可 以 将 函数 绑 定 到 mobileinit 事件 。 语 法 格式 如 下 : 


$ (document) .on ("mobileinit",function(){ 


// jQuery 事件 
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Fe 
例如 jQuery Mobile 开 始 执行 任何 操作 时 都 会 使 用 Ajax 的 方式 ， 如 果 不 想 使 用 Ajax， 可 以 在 
mobileinit 事 件 中 将 $.mobile.ajaxEnabled 更 改 为 false， 代 码 如 下 : 
$ (document) .on ("mobileinit",function()1{ 
$.mobile.ajaxEnabled=false; 
1); 


这 里 需要 注意 的 是 ， 上 面 的 代码 要 放 在 引用 jquery.mobile.js 之 前 。 


2. jQuery Mobile Initialization 事件 


jQuery Mobile Initialization 事件 主要 包括 pagebeforecreate 事件 、pagecreate 事件 和 pageinit 
事件 ， 它 们 的 区 别 如 下 : 


(1) pagebeforecreate 事件 ， 发 生 在 页 面 DOM 加 载 后 ， 正 在 初始 化 时 ， 语 法 格式 如 下 : 


$ (document) .on ("pagebeforecreate", function(){ 
// 程序 语句 
1 


(2) pagecreate 事件 ， 发 生 在 页 面 DOM 加 载 完 成 ， 初 始 化 也 完成 时 ， 语 法 格式 如 下 : 


$ (document) .on ("pagecreate", function(){ 


// 程序 语句 
}); 


(3) pageinit 事件 : 发 生 在 页 面 初始 化 完成 以 后 ， 语 法 格式 如 下 : 


$ (document) .on ("pageinit",function(){ 
// 程序 语句 
]) 7 


下 面 通过 一 个 综合 案例 来 学 习 上 面 三 个 事件 触发 的 时 机 。 


【 例 19.1】〔 实 例文 件 : ch19\19.1.html) 


<!DOCTYPE html> 

<html> 

<head> 

<meta name="viewport" content="width=device-width, initial-scale=1"> 

<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 

<Script 
src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></scri 
pt> 

<script> 

$ (document) .on ("pagebeforecreate", function(){ 

alert ("注意 ，pagebeforecreate 事 件 开始 触 发 ") ; 
上 
$ (document) .on ("pagecreate", function(){ 


alert ("注意 ，pagecreate 事 件 触 发 开始 触发 ") ; 


。421 。 
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a 
$ (document) .on ("pageinit",function(){ 
alert ("注意 ，pageinit 事 件 开 始 触发 ") ; 
1); 
</script> 
</head> 
<body> 
<div data-role="page" id="first"> 
<div data-role="header"> 
<h1> 古 诗 欣 赏 </h1> 
</div> 
<div data-role="main" class="ui-content"> 
<p> 几 回 花 下 坐 吹 第 ， 银 汉 红 墙 入 望 冯 。</p> 
<a href="#second"> 下 一 页 </a> 


</div> 
<div data-role="footer"> 
<h1> 清 代 诗人 </h1> 
</div> 
</div> 


<div data-role="page" id="second"> 
<div data-role="header"> 
<h1> 古 诗 欣 赏 </h1> 
</div> 
<div data-role="main" class="ui-content"> 
<P> 似 此 星辰 非 昨 夜 ， 为 谁 风 露 立 中 宵 。</p> 
人 
</div> 
<div data-role="footer"> 
<h1> 经 典 诗词 </h1> 
</div> 
</div> 
</body> 
</html> 


模拟 器 中 预览 程序 的 效果 ， 各 个 事件 的 执行 顺序 如 图 19-1 所 示 。 单 击 三 次 【确定 】 按 钮 
后 ， 结 果 如 图 19-2 所 示 。 


localhost 


注意 ; pagebeforecreate 事 件 开始 触发 file://localhost/C:/User: 寅 [Google  ] 
古诗 欣赏 


| 


localhost 几 回 花 下 坐 吹 第 ， 银 汉 红 墙 入 望 逐 
注意 ; pagecreate 事 件 触发 开始 触发 下 一 页 


mm 经 典 诗词 


localhost 
注意 : pageinit 事 件 开始 触发 


FE ass Ppt 233 四 [loo ] 


图 19-1 初始 化 事件 图 19-2 页 面 最 终 效果 
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19.1.2 ”外 部 页 面 加 载 事件 


证 


外 面 页 面 加 载 时 ， 最 常见 的 加 载 事 件 如 下 : 
1. pagebeforeload 事件 
pagebeforeload 事件 在 外 部 页 面 加 载 前 触发 ， 语 法 格式 如 下 : 


<script> 
$ (document) .on ("pagebeforeload", function(){ 


alert ("有 外 部 文件 将 被 加 载 ) ; 
1); 
</script> 


2. pageload 事件 

当 页 面 加 载 成 功 时 ， 触 发 pageload 事件 。 语 法 格式 如 下 : 

<script> 

$ (document) .on ("pageload", function (event, data){ 
alert ("pageload 事 件 触发 !\nURL: " + data.url); 


]) 7 
</script> 


pageload 事件 的 函数 的 参数 含义 如 下 : 


(1) event: 任何 jQuery 的 事件 属性 ， 如 event.type、event.pageX 和 target 等 。 
(2) data: 包含 以 下 属性 。 
@ url: 页 面 的 url 地 址 ， 是 字符 串 类 型 。 
@ absUr1l: 绝对 地 址 ， 是 字符 囊 类 型 。 
@ dataUrl: 地 址 栏 URL， 是 字符 囊 类 型 。 
@ options: $.mobile. 1oadPage () 指定 的 选项 ， 是 对 象 类 型 。 
@ xhr:XMLHttpRequest 对 象 ， 是 对 象 类 型 。 
@ textStatus: 对 象 状态 或 空 值 ， 返 回 状态 。 
3. pageloadfailed 事件 
如 果 页 面 载 入 失败 ， 就 触发 pageloadfailed 事件 。 默 认 地 ， 将 显示 "Error Loading Page" 消 


。 语 法 格式 如 下 : 


$ (document) .on ("pageloadfailed",function(event, data){ 
alert (" 抱 歉 ， 被 请 求 页 面 不 存在 。") ; 

]) 7 

</script> 
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下 面 通过 一 个 例子 来 理解 上 述 事件 触发 时 机 。 


【 例 19.2】 实例 文件 : ch19\19.2.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script 
src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></scri 
pt> 
<script> 
$ (document) .on ("pageload", function (event, data){ 
alert ("pageload 事 件 触 发 !\nURL: " + data.url); 
Ws 
$ (document) .on ("pageloadfailed",function(){ 
alert ("抱歉 ， 被 请 求 页面 不 存在 。") ; 
二 
</script> 
</head> 
<body> 
<div data-role="page" id="first"> 
<div data-role="header"> 
<h1> 古 诗 欣 赏 </h1> 
</div> 
<div data-role="content" class="content"> 
<p> 众 鸟 高 飞 尽 ， 孤 云 独 去 闲 。 相 看 两 不 厌 ， 只 有 敬 亭 山 。</p> 
<a href="123.html"> 下 一 页 </a> 
</div> 
<div data-role="footer"> 
<h1> 经 典 诗词 </h1> 
</div> 
</div> 
</body> 
</html> 


模拟 器 中 预览 如 图 19-3 所 示 。 单 击 【 下 一 页 】 按 钮 ， 结 果 如 图 19-4 所 示 。 


古诗 欣赏 古诗 欣赏 
众 岛 高 飞 尽 ， 孤 云 独 去 闲 。 众 岛 高 飞 尽 . 孤 云 独 去 闲 - 
相 看 两 不 大 ， 只 有 冤 享 山 。 localhost 


抱 次 ， 被 请 求 页 面 不 存在 。 


下 一 页 
LL ww 


经 典 诗词 


图 19-3 程序 预览 效果 图 19-4 触发 pageloadfailed 事件 
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19.1.3 页面 过 渡 事 件 
在 jQuery Mobile 中 ， 在 当前 页 面 过 渡 到 下 一 页 时 ， 会 触发 以 下 几 个 事件 。 


(1) pagebeforeshow 事件 : 在 当前 页 面 触发 ， 在 过 渡 动画 开始 前 。 
(2) pageshow 事件 ， 在 当前 页 面 触发 ， 在 过 渡 动 画 完 成 后 。 

(3) pagebeforehide 事件 : 在 下 一 页 触发 ， 在 过 渡 动 画 开始 前 。 
(4) pagehide 事件 : 在 下 一 页 触发 ， 过 渡 动画 完成 后 。 


下 面 通过 一 个 案例 来 学 习 页 面 过 渡 事件 的 触发 时 机 。 


【 例 19.3】〔 实 例文 件 : ch19\19.3.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script 
src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></scri 
pt> 
<script> 
$ (document) .on ("pagebeforeshow", "#second", function(){ 
alert ("触发 pagebeforeshow 事件 ， 下 一 页 即将 显示 "); 
DD); 
$ (document) .on ("pageshow", "#second", function(){ 
alert ("触发 pageshow 事件 ， 现 在 显示 下 一 页 "); 
]) 7 
$ (document) .on ("pagebeforehide","#second", function(){ 
alert ("触发 pagebeforehide 事件 ， 下 一 页 即将 隐藏 ") ; 
]) 7 
$ (document) .on ("pagehide","#second",function(){ 
alert ("触发 pagehide 事件 ， 现 在 隐藏 下 一 页 ") ; 
</acript> 
</head> 
<body> 
<div data-role="page" id="first"> 
<div data-role="header"> 
<h1> 古 诗 欣 赏 </h1> 
</div> 
<div data-role="content" class="content"> 
<p> 众 鸟 高 飞 尽 ， 孤 云 独 去 闲 。 相 看 两 不 厌 ， 只 有 和 敬 亭 山 。</p> 
<a href="#second"> 下 一 页 </a> 
</div> 
<div data-role="footer"> 
<h1> 经 典 诗词 </h1> 
</div> 
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</div> 


<div data-role="page" id="second"> 
<div data-role="header"> 
<h1> 古 诗 欣 赏 </h1> 
</div> 
<div data-role="content" class="content"> 
<p> 众 鸟 高 飞 尽 ， 孤 云 独 去 闲 。 相 看 两 不 厌 ， 只 有 敬 襄 山 。</p> 
<a href="#first"> 上 一 页 </a> 
</div> 
<div data-role="footer"> 
<h1> 经 典 诗词 </h1> 
</div> 
</div> 
</body> 
</html> 


模拟 器 中 预览 如 图 19-5 所 示 。 单 击 【 下 一 页 】 按 钮 ， 事 件 触 发 顺序 如 图 19-6 所 示 。 


localhost 


触发 pagebeforeshow 事件 ， 
下 一 页 即将 显示 


古诗 欣赏 


青青 园 中 黄 ， 朝 露 待 日 蜡 。 
阳春 布 德 泽 ， 万 物 生 光辉 。 


下 一 页 localhost 
触发 pageshow 事件 ， 现 在 显 
示 下 一 页 
经 典 诗词 
图 19-5 程序 预览 效果 图 19-6 ”当前 页 面 触 发 事件 顺序 


单 击 【确定 】 按 钮 ， 进 入 下 一 页 中 ， 如 图 19-7 所 示 。 单 击 【 上 一 页 】 按 钮 ， 事 件 触发 顺 
序 如 图 19-8 所 示 。 


localhost 


触发 pagebeforehide 事件 ， 
下 一 页 即将 隐藏 


确认 


| 


古诗 欣赏 


众 岛 高 飞 尽 ， 孤 云 独 去 闲 。 
相 看 两 不 厌 ， 只 有 冤 亭 山 。 


上 一 页 | localhost 
| 触发 pagehide 事件 ， 现 在 隐 
藏 下 一 页 
经 典 诗词 
图 19-7 程序 预览 效果 图 19-8 下 一 页 触发 事件 顺序 
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19.2 ”触摸 事件 


针对 移动 端 浏览 器 提供 了 触摸 事件 ， 表示 当 用 户 触摸 屏幕 时 触发 的 事件 , 包括 点 击 事件 和 
滑动 事件 。 


19.2.1 点击 事件 
点 击 事件 包括 tap 事件 和 taphold 事件 ， 下 面 将 详细 介绍 它们 的 用 法 和 区 别 。 
1. tap 事件 
当 用 户 点 击 页 面 上 的 元 素 时 ， 会 触发 点 击 (tap) 事 件 ， 语 法 如 下 : 


$("p") .on("tap", function(){ 
$ (this) .hide(); 


上 面 代码 作用 是 点 击 p 组 件 后 ， 将 会 将 该 组 件 隐藏 。 
下 面 通过 一 个 案例 来 讲解 点 击 事件 的 使 用 方法 。 


【 例 19.4】〔 实 例文 件 : ch19\19.4.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script 
src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></scri 
pt> 
<script> 
$ ("div") .on("tap", function(){ 
$ (this) .css("color", "green"); 
]) 7 
</script> 
</head> 
<body> 
<div data-role="page" id="first"> 
<div data-role="header"> 
<h1> 古 诗 欣 赏 </h1> 
</div> 
<div data-role="content" class="content"> 
<p> 黄 师 塔 前 江水 东 ， 春 光 懒 困 倚 微风 。 桃 花 一 簇 开 无 主 ， 可 爱 深 红 爱 浅 红 。</p> 
</div> 
<div data-role="footer"> 
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<h1> 经 典 诗词 </h1> 
</div> 
</div> 
</body> 
</html> 


模拟 器 中 预览 如 图 19-9 示 。 在 页 面 中 诗词 上 面 点 击 ， 即 可 发 现 div 块 内 文字 的 颜色 变 成 了 


绿色 ， 如 图 19-10。 


古诗 欣赏 古诗 欣赏 
黄 师 塔 前 江水 东 ， 春 光 懒 困 倚 微 风 。 黄 师 塔 前 江水 东 ， 春 光 懒 困 倚 微风 。 
桃花 一 簇 开 无 主 ， 可 爱 深 红 爱 浅 红 。 桃花 一 簇 开 无 主 ， 可 爱 深 红 爱 浅 红 。 
经 典 诗词 经 典 诗词 
图 19-9 程序 预览 效果 图 19-10 触发 tap 事件 
2.taphold 


如 果 点 击 页 面 并 按 住 不 放 ， 则 会 触发 taphold 事件 ， 语 法 如 下 : 


$("p") .on("taphold", function(){ 
$ (this) .hide(); 
后 忆 


默认 情况 下 ， 按 住 不 放 750ms 之 后 触发 taphold 事件 。 用 户 也 可 以 修改 这 个 时 间 的 长 短 ， 


语法 如 下 : 


$ (document) .on ("mobileinit",function(){ 
$.event.special.tap.tapholdThreshold=5000; 
1D); 


修改 后 需要 按 住 5 秒 以 后 才 会 触发 taphold 事件 。 


【 例 19.5】〔 实 例文 件 : ch19\19.5.html) 


<!DOCTYPE html> 

<html> 

<head> 

<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" 


href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 


<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script 


src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></scri 


pt> 
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Herdpt> 


$ (document) .on ("mobileinit",function(){ 
$.event.special .tap.tapholdThreshold=1000 


1); 
$ (function() 


{ 


$ ("img") .on ("taphold", function(){ 
$ (this) .hide(); 


1); 

yy 
</script> 
</head> 
<body> 


<div data-role="page" id="first"> 
<div data-role="header"> 


<h1> 可 爱 宠物 </h1> 


</div> 


<div data-role="content" class="content"> 
<img src=19.1.jpg > <br> 


<p> 按 
</div> 


住 图 片 1 秒 后 隐藏 图 片 哦 ! </p> 


<div data-role="footer"> 


<h1> 动 物 天 地 </h1> 


</div> 
</div> 
</body> 
</html> 


模拟 器 中 预览 如 图 19-11 所 示 。 点 击 图 片 1 秒 后 ， 即 可 发 现 图 片 被 隐藏 了 ， 如 图 19-12 所 


不 。 


Pa 
ES 
按 住 图 片 1 秒 后 隐藏 图 片 哦 ! 按 住 图 片 1 秒 后 隐藏 图 片 哦 ! 
动物 天 地 动物 天 地 
图 19-11 程序 预览 效果 图 19-12 触发 taphold 事件 


19.2.2 ”滑动 事件 
滑动 事件 是 在 用 户 一 秒 内 水 平 拖 搜 大 于 30 像素 , 或 者 纵向 拖 电 小 于 20 像素 的 事件 发 生 时 


触发 的 事件 。 滑 动 习 


有 件 使 用 swipe 语法 来 捕捉 ， 语 法 如 下 : 
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$("p") .on("swipe", function(){ 
$ ("span") .text ("滑动 检测 !") ; 
加 
上 述 语法 是 捕捉 p 组 件 的 滑动 事件 ， 并 将 消息 显示 在 span 组 件 中 
向 左 滑动 事件 会 在 用 户 向 左 拖 动 元 素 大 于 30 像素 时 触发 ， 使 用 swipeleft 语法 来 捕捉 ， 语 
法 如 下 : 


o 


$("p") .on("swipeleft", function(){ 
$ ("span") .text ("向 左 滑动 检测 !") ; 
]) 7 


向 右 滑动 事件 在 用 户 向 右 拖 动 元 素 大 于 30 像素 时 触发 , 使 用 swiperight 语法 来 捕捉 , 语法 
如 下 : 


$("p") .on("swiperight, function(){ 
$ ("span") .text ("向 右 滑动 检测 !") ; 
]) 7 


下 面 以 向 右 滑动 事件 为 例 进行 讲解 。 


【 例 19.6】 《实例 文件 ，ch19\19.6html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script 
src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></scri 
pt> 
<script> 
$ (document) .on ("pagecreate", "#first",function(){ 
$ ("img") .on ("swiperight", function(){ 
alert (" 干 嘛 向 右 滑动 我 ! 1"); 
]) 7 
]) 7 
</script> 
</head> 
<body> 
<div data-role="page" id="first"> 
<div data-role="header"> 
<h1> 可 爱 宠物 </h1> 
</div> 
<div data-role="content" class="content"> 
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<img src=19.2.jpg > <br> 


<p> 向 右 滑动 图 片 查 看 效果 </p> 
/dv> 
<div data-role="footer"> 
<h1> 动 物 天 地 </h1> 
</div> 
</div> 
</body> 
</html> 
模拟 器 中 预览 如 图 19-13 所 示 。 向 右 滑动 图 片 ， 效 果 如 图 19-14 所 示 。 
可 爱 宠物 
localhost 
干 嘛 向 右 滑动 我 ! 
UL | 
向 右 滑动 图 片 查看 效果 向 右 滑动 图 片 查看 效果 
图 19-13 程序 预览 效果 图 19-14 触发 向 右 滑动 事件 
19.3 滚屏 事件 


jQuery Mobile 提供 了 两 种 滚屏 事件 , 分 别 是 滚屏 开始 时 触发 Scrollstart 事件 和 滚动 结束 时 
触发 Scrollstop 事件 。 
1. Scrollstart 事件 
scrollstart 事件 是 在 用 户 开 始 滚动 页 面 时 触发 。 语 法 如 下 : 
$ (document) .on ("scrollstart",function(){ 


alert (" 屏 幕 开 始 滚动 了 !") ; 
a 


下 面 通过 一 个 案例 来 理解 Scrollstart 事件 。 


【 例 19.7】〔 实 例文 件 : ch19\19.7.html) 
<!DOCTYPE html> 

<html> 

<head> 
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<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
SEE 
src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></scri 
pt> 
<script> 
$ (document) .on ("pagecreate", "#first",function(){ 
$ (document) .on ("scrollstart", function(){ 
alert ("屏幕 开始 深 动 了 !"); 
}); 
1); 
</script> 
</head> 
<body> 
<div data-role="page" id="first"> 
<div data-role="header"> 
<h1> 古 诗 欣 赏 </h1> 
</div> 
<div data-role="content" class="content"> 
<p> 西 施 越 溪 女 ， 出 自 芝 葛 山 。</p> 
<P> 秀 色 掩 今 古 ， 荷 花 着 玉 颜 。</P> 
<p> 浣 纱 弄 扎 水 ， 自 与 清 波 闲 。</p> 
<p> 卑 齿 信 难 开 ， 沉吟 磊 云 间 。</p> 
<p> 人 勾践 币 绝 艳 ， 扬 蛾 入 吴 关 。</p> 
<p> 提 携 馆 娃 宫 ， 查 渺 诠 可 攀 。</p> 
<p> 一 破 夫差 国 ， 千 秋 竟 不 还 。</p> 
<Pp> 西 施 越 溪 女 ， 出 自 芝 葛 山 。</p> 
<P> 秀 色 掩 今 古 ， 荷 花 着 玉 颜 。</P> 
<p> 浣 纱 弄 碧 水 ， 自 与 清 波 闲 。</p> 
<p> 持 齿 信 难 开 ， 沉 吟 碧 云 间 。</p> 
<p> 人 勾践 币 绝 艳 ， 扬 蛾 入 吴 关 。</p> 
<p> 提 携 馆 娃 宫 ， 查 涉 诺 可 攀 。</p> 
<p> 一 破 夫差 国 ， 千 秋 竟 不 还 。</p> 
</div> 
<div data-role="footer"> 
<h1> 经 典 诗词 </h1> 
</div> 
</div> 
</body> 
</html> 


模拟 器 中 预览 如 图 19-15 所 示 。 向 上 滚动 屏幕 ， 效 果 如 图 19-16 所 示 。 
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EE [Co | 
西施 越 溪 女 ， 出 自 艺 萝 山 。 


秀色 掩 今 古 ,荷花 闭 玉 颜 。 


古诗 欣赏 


西施 越 溪 女 ， 出 自 蔚 萝 山 。 
秀色 掩 今 古 ， 荷 花 闭 玉 颜 。 


浣 纱 弄 怕 水 ， 自 与 清 波 亲 
ee 
| localhost 
多 中 屏幕 开始 深 动 了 ! 


尝 纱 弄 看 水 ， 自 与 清 波 闲 。 
禾 齿 信 难 开 ， 沉吟 各 云 间 。 
勾践 微 绝 艳 ， 扬 蛾 入 吴 关 。 
提 撞 馆 娃 宫 ， 吾 小 谍 可 和 西施 越 溪 女 ， 出 自 基 萝 山 。 
一 破 夫 美国 ， 千 秋 况 不 还 


西施 越 溪 女 ， 


秀色 掩 今 古 ， 有 花 闭 玉 颜 。 
浣 纱 弄 刁 水 ， 自 与 清 波 闲 。 


图 19-15 ”程序 预览 效果 图 19-16 ”触发 滚屏 事件 


2. Scrollstop 事件 
scrollstop 事件 是 在 用 户 停止 滚动 页 面 时 触发 ， 语 法 如 下 : 


$ (document) .on ("scrollstop", function(){ 
alert (" 停 止 滚动 !") 


下 面 通过 一 个 案例 来 理解 Scrollstart 事件 。 


【 例 19.8】〔 实 例文 件 : ch19\19.8.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script 
src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></scri 
pt> 
<script> 
$ (document) .on ("pagecreate", "#first",function(){ 
$ (document) .on ("scrollstop", function(){ 
alert ("屏幕 已 经 停止 深 动 了 !"); 
es 
]) 7 
“acrtpEt> 
</head> 
<body> 
<div data-role="page" id="first"> 
<div data-role="header"> 
<h1> 古 诗 欣 赏 </h1> 
</div> 
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<div data-role="content" class="content"> 
<P> 嘲 吁 哦 ， 危 乎 高 哉 ! </p> 
<p> 昌 道 之 难 ， 难 于 上 青天 ! </p> 
<P> 答 从 及 鱼 卸 ， 开 国 何 茫然 ! </p> 
<p> 尔 来 四 万 八 千岁 ， 不 与 秦 塞 通 人 烟 。</p> 
<p> 西 当 太白 有 鸟 道 ， 可 以 横 绝 峨 岂 讶 。</p> 
<P> 地 骨 山 摧 壮 士 死 ， 然 后 天 梯 石 栈 方 钩 连 。</P> 
<p> 上 有 六 龙 回 日 之 高 标 ， 下 有 冲 波 逆 折 之 回 川 。</p> 
<P> 黄 稚 之 飞 尚 不 得 过 ， 猿 狐 欲 度 悉 攀援 。</P> 
<p> 青 泥 何 盘 盘 ， 百 步 九 折 蒙 岩 帘 。</p> 
<p> 拉 参 历 井 仰 胁 息 ， 以 手 抚 磨 坐 长 叹 。</p> 
<p> 问 君 西 游 何 时 还 ? 萌 途 几 岩 不 可 攀 。</p> 
<p> 但 见 翡 鸟 号 古木 ， 雄 飞 从 肉 绕 林 间 。</p> 
<p> 又 闻 子 规 啼 夜 月 ， 愁 空山 。</p> 
<p> 昌 道 之 难 ， 难 于 上 青天 ， 使 人 听 此 凋 朱 颜 。</p> 
<p> 连 峰 去 天 不 春 尺 ， 枯 松 倒 挂 倚 绝 壁 。</p> 
<P> 飞 满 瀑 流 争 喧 兢 ， 太 崖 转 石 万 至 雷 。</p> 
<p> 其 险 也 若 此 ， 呈 尔 远道 之 人 ， 胡 为 乎 来 哉 。</P> 
<p> 剑 阅 峥 嵘 而 崔 哆 ， 一 夫 当 关 ， 万 夫 莫 开 。</p> 
<p> 所 守 或 菲 亲 ， 化 为 狼 与 对 。</p> 
<p> 朝 避 猛 虎 ， 夕 避 长 蛇 ， 磨 牙 哆 血 ， 杀 人 如 麻 。</p> 
<p> 锦 城 虽 云 乐 ， 不 如 早 还 家 。</p> 
<p> 罚 道 之 难 ， 难 于 上 青天 ， 侧 身 西 望 长 咨 唆 。</p> 
</div> 
<div data-role="footer"> 
<h1> 经 典 诗词 </h1> 
</div> 
</div> 
</body> 
</html> 


模拟 器 中 预览 如 图 19-17 所 示 。 向 上 滚动 屏幕 ， 停 止 后 效果 如 图 19-18 所 示 。 


西 当 太白 有 乌 道 ， 可 以 横 绝 峨 凤 册 。 
地 崩 山 摧 壮 士 死 ， 然 后 天 梯 石 栈 方 钧 连 。 


上 有 六 龙 回 日 之 高 标 ， 下 有 冲 波 逆 折 之 回 
川 。 


黄 锥 之 飞 尚 不 得 过 ， 猿 狐 谷 度 愁 学 援 。 


图 19-17 程序 预览 效果 


而 
古诗 欣赏 上 有 六 龙 回 日 之 高 标 ， 下 有 冲 波 逆 折 之 回 
川 
嘲 吁 腾 ， 危 平 高 吉 ! 黄 多 之 飞 尚 不 得 过 ， 铬 独 欲 度 息 党 援 。 
蜀 道 之 难 ,难于 上 青天 ! 青 泥 何 盘 盘 ， 百 步 九 折 茶 岩 恋 。 
重 丛 及 鱼 名 ， 开 国 何 茫然 ! 扣 参 localhost 
尔 来 四 万 八 千岁 ， 不 与 泰 塞 通 人 烟 。 (UE fateh 
但 风 铀 从 


Pe O 和 
Camem ape pot 233 四 [Lo0% 7] 


又 闻 子 规 暗 夜 月 ， 苇 空山 。 
蜀 道 之 难 ， 难 于 上 青天 ， 使 人 听 此 凋 朱 
颜 。 


连 峰 去 天 不 盈 尺 ， 枯 松 倒挂 倚 绝 壁 。 


2 已 团 - 


aom 97s639 ppt233 [la oo 


图 19-18 触发 滚屏 事件 
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19.4 定位 事件 


当 移动 设备 水 平 或 垂直 翻转 时 触发 定位 事件 。 也 就 是 常 说 的 方向 改变 〈orientationchange) 
事件 。 
在 使 用 定位 事件 时 ， 请 将 orientationchange 事件 绑 定 到 window 对 象 上 ， 语 法 如 下 : 


$ (window) .on ("orientationchange" function (event){ 
alert ("设备 的 方向 改变 为 "+ event.orientation); 
]) 7 


这 里 的 event 对 象 用 来 接收 orientation 属性 值 ， 用 event.orientation 返回 的 是 设备 是 水 平 还 
是 垂直 ， 类 型 为 字符 串 ， 如 果 是 横行 ， 返 回 值 为 landscape， 如 果 是 纵向 ， 返 回 值 为 portrait。 
下 面 通过 一 个 案例 来 理解 orientationchange 事件 。 


【 例 19.9】〔 实 例文 件 ，ch19\19.9.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script 
src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></scri 
pt> 
<script type="text/javascript"> 
$ (document) .on ("pageinit",function (event){ 
$( window ) .on( "orientationchange", function( event ) { 
if (event.orientation == "landscape") 
$( "#orientation" ) .text( "现在 是 水 平 模 
起 中 ).css({"background-color":"yellow", "font-size":"300%"}); 
if(event.orientation == "portrait") 
$( "#orientation" ) .text( "现在 是 垂直 模 
起 过 ).css({"background-color":"green", "font-size":"200%"}); 
四 厂 
}) 
/SOLDES 
</head> 
<body> 
<div data-role="page" id="first"> 
<div data-role="header"> 
<h1> 古 诗 欣 赏 </h1> 
</div> 
<div data-role="content" class="content"> 
<span id="orientation"></span><br> 
<p> 燕 草 如 起 丝 ， 秦 桑 低 绿 枝 。 当 君 怀 归 日 ， 是 妾 断肠 时 。 春 风 不 相识 ， 何 事 入 罗 帽 </p> 
</div> 
<div data-role="footer"> 
<h1> 经 典 诗词 </h1> 
</div> 
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</div> 
</body> 
</html> 


模拟 器 中 预览 如 图 19-19 所 示 。 单 击 模拟 器 上 的 方向 改变 按钮 名， 此 时 方向 改变 为 水 平方 


向 ， 效 果 如 图 19-20 所 示 。 
再 次 单 击 模拟 器 上 的 方向 改变 按钮 [ 国 ， 此 时 方向 改变 为 垂直 方向 ， 效 果 如 图 19-21 所 示 。 
Ge GD 


古诗 欣赏 


fieyocalhosvCusersnamin 太 着 5008。 


燕 草 如 条 丝 ， 素 桑 低 绿 枝 。 当 君 怀 归 日 ， 
是 妆 断 肠 时 。 春 风 不 相识 ， 何 事 入 罗 帽 燕 草 如 碧 丝 ， 秦 又 低 绿 枝 。 当 君 怀 归 日 ， 


是 妆 断 肠 时 。 春 风 不 相识 ， 何 事 入 罗 帽 


菩 草 如 萎 丝 ， 秦 风 低 绿 枝 。 当 君 杯 归 日 ， 是 关 断 肠 
时 。 春 风 不 相识 ， 何 事 入 罗 柄 


Ee) 


图 19-19 程序 预览 效果 图 19-20 设备 水 平方 向 图 19-21 设备 垂直 方向 


19.5 ”专家 解 惑 


绑 定 事件 的 方法 on() 和 one() 的 区 别 ? 
绑 定 事件 的 方法 on0 和 one0O 的 作用 相似 ， 它 们 唯一 的 区 别 在 于 oneO 只 能 执行 一 次 。 
例如 当 在 按钮 上 绑 定 单 击 鼠标 事件 时 ，on0 方 法 的 程序 如 下 : 


二 SC 之 

$ (document) .on (\click" ,function()1{ 
alert ("这 是 使 用 on () 方法 绑 定 的 事件 ") 

DD); 

</script> 


小 白 : 如 何在 设备 方向 改变 时 获取 移动 设备 的 高 度 和 宽度 ? 
宽度 ， 可 以 绑 定 resize 事件 。 该 事件 
在 页 面 大 小 改变 时 将 被 触发 ， 语 法 如 下 : 


$ (window) .on ("resize",function(){ 

Var win= $ (this); //this 指 的 是 window 
alert ("宽度 为 "+win.width()+" 高 度 为 "+ win. height ()); 
1); 
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Bootstrap 是 一 款 用 于 快速 开发 Web 应 用 程序 和 网 站 的 前 端 框架 ， 它 是 基于 HTML、CSS 
和 JavaScript 等 技术 开发 的 。 本 章 将 简单 介绍 Bootstrap 的 基本 使 用 。 


20.1 ”Bootstrap 概述 


Bootstrap 是 由 Twitter 公司 主导 设计 研发 的 ， 基 于 HTML、CSS、JavaScript 开发 的 简洁 、 
直观 的 前 端 开发 框架 ， 使 得 Web 开发 更 加 快捷 。Bootstrap 推出 后 颇 受 欢迎 ， 一 直 是 GitHub 上 
的 热门 开源 项 目 ， 可 以 说 是 目前 最 受 欢 迎 的 前 端 框架 之 一 。 


20.1.1 Bootstrap 特色 

Bootstrap 是 当前 比较 流行 的 前 端 框架 , 起 源 于 Twitter, 是 Web 开发 人 员 的 一 个 重要 工具 。 

1. 跨 设备 ， 跨 浏览 器 

可 以 兼容 所 有 现代 主流 浏览 器 ，Bootstrap 3 不 兼容 IE7 及 其 以 下 的 版 本 ，Bootstrap 4 不 再 
支持 IE8。 自 Bootstrap 3 起 ， 框 架 包 含 了 贯穿 于 整个 库 的 移动 设备 优先 的 样式 ， 重 点 支持 各 种 
平板 电脑 和 智能 手机 等 移动 设备 。 

2. 响应 布局 

从 Bootstrap 2 开始 ， 便 支持 响应 式 布 局 ， 能 够 自 适 应 于 台式 机 、 平 板 电脑 和 手机 ， 从 而 提 
供 一 致 的 用 户 体验 。 

3. 列 网 格 布局 

Bootstrap 提供 了 一 套 响应 式 、 移 动 设备 优先 的 网 格 系统 ， 随 着 屏幕 或 视 口 (viewport) 尺 
寸 的 增加 ， 系 统 会 自动 分 为 最 多 12 列 ， 也 可 以 根据 自己 的 需要 定义 列 数 。 

4. 比较 全 面 的 组 件 

Bootstrap 提供 了 实用 性 很 强 的 组 件 ， 如 导航 、 按 钮 、 下 拉 菜 单 、 表 单 、 列 表 、 输 入 框 等 ， 
供 开 发 者 使 用 。 
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5. 内 置 jQuery 插件 

Bootstrap 提供 了 很 多 实用 性 的 JQuery 插件 ， 如 模 态 框 、 旋 转 木 马 等 ， 这 些 插件 方便 开发 
者 实现 Web 中 各 种 常规 特效 。 

6. 支持 HTML5 和 CSS3 

因为 Bootstrap 的 使 用 要 求 在 HTMLS5 文档 类 型 的 基础 上 ， 所 以 支持 HIMLS 标签 和 语法 。 
Bootstrap 支持 CSS3 的 属性 和 标准 ， 并 不 断 完善 。 

7. 容易 上 手 

只 要 具备 HTML 和 CSS 的 基础 知识 ， 就 可 以 开始 学 习 Bootstrap 并 使 用 它 。 

8. 开源 的 代码 

Bootstrap 是 完全 开源 的 ， 不 管 是 个 人 还 是 企业 都 可 以 免费 使 用 。Bootstrap 全 部 托管 于 
GitHub， 并 借助 GitHub 平台 实现 社区 化 的 开发 和 共 建 。 


20.1.2 Bootstrap 4 的 更 新 
Bootstrap 4 相 比 Bootstrap 3 有 太 多 重要 的 更 新 ， 下 面 是 其 中 一 些 更 新 的 亮点 。 


(1) 不 再 支持 IE8， 使 用 rem 和 em 单位 Bootstrap 4 放弃 对 IE8 的 支持 ， 这 意味 着 开发 
者 可 以 放心 地 利用 CSS 的 优点 ， 不 必 再 研究 CSS hack 技巧 或 回 退 机 制 。 使 用 rem 和 em 代替 
像素 单位 ， 更 适合 做 响应 式 布局 及 控制 组 件 大 小 。 如 果 要 支持 IE8， 就 只 能 继续 用 Bootstrap 3 。 

(2) 从 Less 到 Sass: 现在 ，Bootstrap 已 加 入 Sass 的 大 家 庭 中 ,得 益 于 Libsass，Bootstrap 
的 编译 速度 比 以 前 更 快 。 

(3) 支持 选择 弹性 盒 模型 (Flexbox) : 这 是 一 项 划时代 的 功能 ， 即 只 要 修改 一 个 变量 
Boolean 值 ， 就 可 以 让 Bootstrap 中 的 组 件 使 用 Flexbox。 

(4) 废弃 了 wells、thumbnails 和 panels， 使 用 cards〈 卡 片 ) 代替 : Cards 是 一 个 全 新 的 
概念 ， 使 用 起 来 与 wells、thumbnails 和 panels 很 像 ， 但 是 更 加 方便 。 

(5) 将 所 有 HTML 重 置 样式 表 整 合 到 Reboot 中 : 在 一 些 用 不 了 Normalize.css 的 地 方 ， 
可 以 使 用 Reboot 重 置 样式 ， 它 提供 了 更 多 选项 。 

(6) 新 的 自 定义 选项 : 不 再 将 Flexbox、 渐 变 、 圆 角 、 阴 影 等 效果 分 放 在 单独 的 样式 表 中 ， 
而 是 将 所 有 选项 都 移 到 一 个 Sass 变量 中 。 如 果 想 改变 默认 效果 ， 就 只 需要 更 新 变量 值 ， 重 新 编 
译 就 可 以 了 。 

(7) 重 写 所 有 JavaScript 插件 : 为 了 利用 JavaScript 的 新 特性 ，Bootstrap 4 用 ES6 重 写 了 
所 有 插件 。 现 在 提供 UMD 支持 、 泛 型 拆 解 方法 、 选 项 类 型 检查 等 特性 。 
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(8) 更 多 变化 : 支持 自 定义 窗 体 控件 、 空 白 和 填充 类 ， 还 包括 新 的 实用 程序 类 等 。 


20.2 下载 Bootstrap 


Bootstrap 4 是 Bootstrap 的 最 新 版 本 ， 与 之 前 的 版 本 相 比 拥有 更 强大 的 功能 。Bootstrap 4 
有 两 个 版 本 的 压缩 包 : 一 个 是 源 代码 文件 ， 主 要 供 学 习 使 用 ， 另 一 个 是 编译 版 ， 主 要 供 直 接 引 
用 。 

1. 下 载 源 代码 版 的 Bootstrap 

我 们 知道 Bootstrap 全 部 托管 于 GitHub, 并 借助 GitHub 平台 实现 社区 化 的 开发 和 共 建 ， 所 
以 可 以 到 GitHub 上 下 载 Bootstrap 压缩 包 。 使 用 谷歌 浏览 器 访问 https://github.comy/twbs/bootstrap/ 
页 面 ， 单 击 “Download ZIP” 按 钮 ， 下 载 最 新 版 的 Bootstrap 压缩 包 ， 如 图 20-1 所 示 。 


Branch: v4-dev™ 


Johems fstil use gutHlemerntiyid when W's posiible Clone with Hrrps@ 
github Use Git or checkout with SYN using the web URL 
mttps://github, com/twbs/bootstrap.git 
a build 
人 dist 
Open in Desktop 
js t's possib 


https://github.com/twbs/bootstrap/archive/v4-devzip 


国 bootstrap-4-devzip 。 ^ 


图 20-1 在 GitHub 上 下 载 源 代 码 文件 
Bootstrap 4 源 代码 下 载 完 成 后 解压 ， 目 录 结 构 如 图 20-2 所 示 。 


|B 昌 : | bootstrap-413- 一 口 X 
EY :sx : 5 0 
二 ~ 个 下 ，bocotstrap > ap-41.3- v 巴 瘦 索 "boo.. 记 
boot bootstr 
I ob ] eslintignore composerjson 
l 是 buid ] eslintrcjson Gemfile 
T dist ] .gitattributes Gemfilelock 
I js ] .gitignore LICENSE 
I nuget ] stylelintignore 国 packagejs 
[ 由 :css Dstylelintre [DD packagejson < 
用 se ] sravisyml DD package-lockjson 
[| 园 .babelrcjs Dconfigyml DREADME.md 
丰 了 ] browserslistrc J cNAME 了] sachejson 
] editorconfig copE OF CONDUCT.md 
v 
29 个 项 目 区 


图 20-2 源 代码 文件 的 目录 结构 


2. 下 载 编译 版 Bootstrap 
如 果 用 户 需 要 快速 使 用 Bootstrap 来 开发 网 站 ， 就 可 以 直接 下 载 经 过 编译 、 压 缩 后 的 发 布 
版 本 ， 使 用 浏览 器 访问 http://getbootstrap.com/docs/4.1/getting-started/download/ 页 面 ， 单 击 
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“Download” 按 钮 ， 下 载 编译 版 本 压缩 文件 ， 如 图 20-3 所 示 。 


所 GC OO |© getbootstrap.com/docs/4.1/getting-started/download/ 图 女 


Documentation 


Search-。 Compiled CSS and JS 


Download ready-to-use compiled code for Bootstrap v4.1.3 to easily drop into your 


po | project, which includes: 
Introduction 。 Compiled and minified CSS bundles (see CSS files comparison) 
Download 。 Compiled and minified JavaScript plugins 


Contents 


dacumentation, source files, or any optional JavaScript 
an 和 Popperjs). 


dessntinclud 
dependencies (jQuery 


Browsers & devices 


JavaScript 
Build tools Y 


图 20-3 从 官网 下 载 编译 版 的 Bootstrap 


编译 版 的 压缩 文件 仅 包含 编译 好 的 Bootstrap 应 用 文件 ,包括 CSS 和 JS 文件, 相 比 Bootstrap 
3 少 了 fonts 字体 文件 ， 如 图 20-4 所 示 。 


闻 bootstrap-4.1.3 一 口 x 
所 洁 ~ 个 国 ，bootstr.. > bootstrap-4.1.3 Y 已 省 索 "boo.. 记 
mn ， 
~ -py 
js 
重 
省 《| 
而 
= 
2 个 项 目 。 选中 1 个 项 目 = 图 


图 20-4 编译 文件 的 目录 结构 
CSS 文件 的 目录 结构 如 图 20-5 所 示 ，JS 文件 的 目录 结构 如 图 20-6 所 示 。 


- oo x 让 - 0O x 
到 
二 共享 。 查看 @ 
个 国 «bootstrap » bootetrap-413 > ess vo se Pp 
Rps swore € ~ 个 晶 “ bootstrap ， bootstrap-4.1.3 ，js vO 再 科 js 也 
bootstrapess ~ 
[si 全 Y 图 bootstrap.bundlejs 
| 国 beoenpminees > D bootstrap.bundlejs.map 
口 beoawapminceamap WR 
v1 国 beowtopordes 加 生境 
i 4 中] bootstrap .bundleminjsmap 
国 bootstrapjs 
D bootstrapjs.map 
;Dewar reborn 国 bootstrap.minjs 
vi botstoprebootmines ” Dbootstrap.minjs.map 
yD booreap-rebootmineee map viv | 
13 mB 忆 8 个 项 目 = 加 
图 20-5 CSS 文件 目录 结构 图 20-6 JS 文件 目录 结构 


在 网 站 目录 中 ， 导 入 相应 的 CSS 和 J 文件, 便 可 以 在 项 目 中 使 用 Bootstrap 的 效果 和 插件 了 。 
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20.3 安装 Bootstrap 
Bootstrap 需要 安装 后 才 可 以 使 用 。 


20.3.1 本 地 安装 Bootstrap 


因为 Bootstrap 是 本 着 移动 设备 优先 的 策略 开发 的 ， 所 以 优先 为 移动 设备 优化 代码 ， 根 据 
每 个 组 件 的 情况 并 利用 CSS 媒体 查询 技术 为 组 件 设置 合适 的 样式 .为 了 确保 在 所 有 设备 上 正确 
泻 染 并 支持 触 控 缩放 ， 需 要 将 设置 viewport 属性 的 <meta> 标 签 添 加 到 <head> 中 ,具体 如 下 面 代 
码 所 示 。 

<meta name="viewport" content="width=device-width, initial-scale=1, 
shrink-to-fit=no"> 

本 地 安装 Bootstrap 大 致 可 分 为 以 下 两 步 。 

第 一 步 : 安装 Bootstrap 的 基本 样式 ， 使 用 <link> 标 签 引 入 Bootstrap.css 样式 表 文 件 ， 并 且 
放 在 其 他 样式 表 之 前 ， 如 下 代码 所 示 。 


<link rel="stylesheet" href="bootstrap-4.1.3/css/bootstrap.css"> 


第 二 步 : 调用 Bootstrap 的 JS 文件 及 jQuery 框架 。 要 注意 Bootstrap 中 的 许多 组 件 需 要 依 
赖 JavaScript 才能 运行 ， 它 们 依赖 的 是 jQuery 、Popperjs，Popperjs 包含 在 我 们 引入 的 
bootstrap.bundlejs 中 。 具 体 的 引入 顺序 是 ，jQueryjs 必须 放 在 最 前 面 ， 然 后 是 bundlejs， 最 后 
是 Bootstrap.js， 如 下 面 的 代码 所 示 。 

<script src="jquery.js"></script> 

<script src="bootstrap-4.1.3/js/bootstrap.bundle.js"></script> 

<script src="bootstrap-4.1.3/js/bootstrap.js"></script> 


20.3.2 ”初次 使 用 Bootstrap 


下 面 我 们 就 来 使 用 Bootstrap 完成 一 个 简单 的 小 案例 。 
首先 需要 在 页 面 <head> 中 引入 Bootstrap 核心 代码 文件 。 代 码 如 下 : 


<meta name="viewport" content="width=device-width, initial-scale=1, 
shrink-to-fit=no"> 

<link rel="stylesheet" href="bootstrap-4.1.3/css/bootstrap.css"> 

<script src="jquery.js"></script> 

<script src="bootstrap-4.1.3/js/bootstrap.bundle.js"></script> 

<script src="bootstrap-4.1.3/js/bootstrap.js"></script> 


然后 在 <body> 中 添加 一 个 <h1> 标 签 , 并 添加 Bootstrap 中 的 bg-dark 和 text-white 类 .bg-dark 
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类 用 于 设置 <h1> 标 签 的 背景 色 为 黑色 ，text-white 设置 <h1> 标 签 的 字体 颜色 为 白色 ， 具 体 代码 
如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<meta name="viewport" content="width=device-width, initial-scale=1, 
shrink-to-fit=no"> 
<link rel="stylesheet" href="bootstrap-4.1.3/css/bootstrap.css"> 
<script src="jquery.js"></script> 
<script src="bootstrap-4.1.3/js/bootstrap.bundle.js"></script> 
<script src="bootstrap-4.1.3/js/bootstrap.js"></script> 
</head> 
<body> 
<!--.bg-dark 类 用 来 设置 背景 颜色 为 黑色 ，text-white 用 来 设置 文本 颜色 为 白色 --> 
<hl class="bg-dark text-white">hello world!</h1> 
</body> 
</html> 


在 下 11.0 浏览 器 中 显示 效果 如 图 20-7 所 示 。 


一 口 x 
各] CNUserswdministrat PD ~ © | BCAUsers\Admii 


图 20-7 初始 Bootstrap 


注意 ， 在 <head> 中 引入 的 核心 代码 在 后 续 的 内 容 中 将 省 略 ， 读 者 务必 加 上 。 


20.4 使 用 常用 组 件 


Bootstrap 提供 了 大 量 可 复 用 的 组 件 ， 下 面 简单 介绍 其 中 一 些 常 用 的 组 件 , 更 加 详细 的 内 容 
请 参考 官方 文档 。 


20.4.1 使 用 下 拉 菜单 

下 拉 菜 单 是 网 页 中 经 常 看 到 的 效果 之 一 ， 使 用 Bootstrap 很 容易 就 可 以 实现 。 

在 Bootstrap 中 可 以 使 用 一 个 按钮 或 链接 来 打开 下 拉 菜 单 ， 按 钮 或 链接 需要 添 
加 .dropdown-toggle 类 和 data-toggle="dropdown" 属 性 。 

在 菜单 元 素 中 添加 .dropdown-menu 类 来 实现 下 拉 ， 然 后 在 下 拉 菜 单 的 选项 中 添 
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加 .dropdown-item 类 。 在 下 面 的 案例 中 使 用 一 个 列表 来 设计 菜单 。 


【 例 20.1】 实例 文件 ，ch20\Chap20.1.html)〉 下 拉 菜 单 。 
<!DOCTYPE html> 
<html> 
<head> 
<title> </title> 
<meta name="viewport" content="width=device-width, initial-scale=1, 
shrink-to-fit=no"> 
<link rel="stylesheet" href="bootstrap-4.1.3/css/bootstrap.css"> 
<script src="jquery.js"></script> 
<script src="bootstrap-4.1.3/js/bootstrap.bundle.js"></script> 
<script src="bootstrap-4.1.3/js/bootstrap.js"></script> 
</head> 
<body> 
<div class="container"> 
<div> 
<!--.btn 类 设置 a 标签 为 按钮 ，.dropdown-toggle 类 和 data-toggle="dropdown" 
属性 类 别 ， 用 来 激活 下 拉 菜 单 --> 
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> 下 拉 菜 单 


</a> 
<!--.dqropdown-menu 用 来 指定 被 激活 的 菜单 --> 
<ul class="dropdown-menu"> 
<!--.dropdown-item 添 加 列表 元 素 的 样式 --> 
<li><a href="#" class="dropdown-item"> 新 闻 </a></1i> 
<li><a href="#" class="dropdown-item"> 电 视 </a></1i> 
<li><a href="#" class="dropdown-item"> 电 影 </a></1i> 
</ul> 
</div> 
</div> 
</body> 
</html> 


在 正 11.0 浏览 器 中 运行 的 结果 如 图 20-8 所 示 。 


大 | ENanlN 源 码 \bootstral| 了 DO a 
文件 (月 ”编辑 (E) ”查看 (V) 收藏 夫 (A) 工具 (T) 帮助 (H) 
下 拉 荣 单 
新 闻 
电视 
电影 


图 20-8 下 拉 菜 单 
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20.4.2 ”使 用 按钮 组 


用 含有 .btn-group 类 的 容器 把 一 系列 含有 .btn 类 的 按钮 包 于 起 来 , 便 形 成 了 一 个 页 面 组 件 一 
一 按钮 组 。 


【 例 20.2】 “实例 文件 :ch20\Chap20.2.html) 按钮 组 。 


<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<meta name="viewport" content="width=device-width, initial-scale=1, 
shrink-to-fit=no"> 
<link rel="stylesheet" href="bootstrap-4.1.3/css/bootstrap.css"> 
<script src="jquery.js"></script> 
<script src="bootstrap-4.1.3/js/bootstrap.bundle.js"></script> 
<script src="bootstrap-4.1.3/js/bootstrap.js"></script> 
</head> 
<body> 
<div class="container"> 
<!-- 使 用 含有 .btn-group 类 的 div 来 包 庄 按 钮 元 素 --> 
<div class="btn-group"> 
<!--.btn btn-primary 设 置 按钮 为 浅 蓝 色 ; .btn btn-info 设 置 为 按钮 深蓝 色 ; .btn 
btn-success 设 置 按 钮 为 绿色 ; .btn btn-warning 设 置 按钮 为 黄色 ; .btn btn-danger 设 置 按钮 
为 红色 ; --> 
<button class="btn btn-primary"> 首 页 </button> 
<button class="btn btn-success"> 新 闻 </button> 
<button class="btn btn-info"> 电 视 </button> 
<button class="btn btn-warning"> 电 影 </button> 
<button class="btn btn-danger"> 动 漫 </button> 
</div> 
</div> 
</body> 
</html> 


在 下 11.0 浏览 器 中 运行 的 结果 如 图 20-9 所 示 。 


加 ENani 源 吧 \bootstral 六 - 上 | 感 皖 旨 组 
文件 (站 久久 (E) ， 坦 看 (V) ， 收 茂 闪 (A)， 工具 (帮助 (H) 


图 20-9 按钮 组 
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20.4.3 ”使 用 导航 组 件 


一 个 简单 的 导航 栏 可 以 通过 在 <ul> 元 素 上 添加 .nav 类 、 每 个 <li> 元 素 上 添加 .nav-item 类 、 
每 个 链接 上 添加 .nav-link 类 来 实现 ， 如 下 面 的 代码 所 示 。 


【 例 20.3】〔 实 例文 件 ，ch20\Chap20.3.html) 简单 导航 。 


<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<meta name="viewport" content="width=device-width, initial-scale=1, 
shrink-to-fit=no"> 
<link rel="stylesheet" href="bootstrap-4.1.3/css/bootstrap.css"> 
<script src="jquery.js"></script> 
<script src="bootstrap-4.1.3/js/bootstrap.bundle.js"></script> 
<script src="bootstrap-4.1.3/js/bootstrap.js"></script> 
</head> 
<body> 
<div class="container"> 
<p> 基 本 的 导航 :</p> 
<!-- 在 ul 中 添加 .nav 类 创建 导航 栏 --> 
<ul class="nav"> 
<!-- 在 11i 中 添加 .nav-item, 在 a 中 添加 .nav-link 设 置 导航 的 样式 --> 
<li class="nav-item"><a class="nav-link" href="#"> 小 说 </a></1i> 
<li class="nav-item"><a class="nav-link" href="#"> 音 乐 </a></1i> 
<li class="nav-item"><a class="nav-link" href="#"> 视 频 </a></1i> 
<li class="nav-item"><a class="nav-link" href="#"> 游 戏 </a></1i> 
</ul> 
</div> 
</body> 
</html> 


在 正 1.0 浏 览 器 中 运行 的 结果 如 图 20-10 所 示 。 


=- OO x 
@ Efile///E/ani/ 二 /bo 只 - 上 | 关 二 本 SN 
| 文件 (篇 纺 (5) 查看 (V) 收藏 灾 工具 [帮助 0H] 


“基本 的 导航 : 


小 说 ”音乐 “视频 游戏 


图 20-10 基本 的 导航 


Bootstrap 的 导航 组 件 都 是 建立 在 基本 导航 之 上 的 , 可 以 通过 扩展 基础 的 .nav 组 件 来 实现 别 
样 的 导航 样式 。 
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1. 标签 页 导航 
在 基本 导航 中 为 <ul> 元 素 添加 .nav-tabs 类 ， 对 于 选中 的 选项 使 用 .active 类 并 为 每 个 链接 添 
加 data-toggle="tab" 属 性 类 别 ， 便 可 以 实现 标签 页 导航 了 。 


【 例 20.4】 (实例 文件 :ch20\Chap20.4.html) 标签 页 导航 。 


<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<meta name="viewport" content="width=device-width, initial-scale=1, 
shrink-to-fit=no"> 
<link rel="stylesheet" href="bootstrap-4.1.3/css/bootstrap.css"> 
<script src="jquery.js"></script> 
<script src="bootstrap-4.1.3/js/bootstrap.bundle.js"></script> 
<script src="bootstrap-4.1.3/js/bootstrap.js"></script> 
</head> 
<body> 
<div class="container"> 
<p> 标 签 页 导航 </p> 
<!-- 在 ul 中 添加 .nav 和 .nav-tabs，.nav-tabs 用 来 设置 标签 页 导航 --> 
<ul class="nav nav-tabs"> 


<!-- 在 1i 中 添加 .nav-item， 在 a 中 添加 .nav-1ink， 对 于 选中 的 选项 添加 .active 类 


二 = 
<!-- 添 加 data-toggle="tab" 属 性 类 别 ， 是 去 掉 a 标签 的 默认 行为 ， 实 现 动态 切换 导航 
的 active 属 性 效果 --> 
<1i class="nav-item"><a class="nav-link active" href="#" 
data-toggle="tab"> 健 康 </a></1i> 
<1i class="nav-item"><a class="nav-link" href="#" 
data-toggle="tab"> 时 尚 </a></1i> 
<1i class="nav-item"><a class="nav-link" href="#" 
data-toggle="tab"> 减 肥 </a></1i> 
<1i class="nav-item"><a class="nav-link" href="#" 
data-toggle="tab"> 美 食 </a></1i> 
<1i class="nav-item"><a class="nav-link" href="#" 
data-toggle="tab"> 交 友 </a></1i> 
<li class="nav-item"><a class="nav-link" href="#" 
data-toggle="tab"> 社 区 </a></1i> 
</ul> 
</div> 
</body> 
</html> 


在 正 11.0 浏览 器 中 运行 的 结果 如 图 20-11 所 示 。 
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- oO x 
局 ] EAanIN 末 二 bootstral ”0 | 三 本 ss 入 x 1 
六 听 月 ”志和 (5) 喜 乔 (V) 必 半 去。 工具。 才 山 (H) 
标签 页 导航 


健康 时 尚 减 取 美食 交友 社区 


图 20-11 标签 页 导航 


2. 胶囊 导航 
在 基本 导航 中 为 <ul> 添 加 .nav-pills 类 ， 对 于 选中 的 选项 使 用 .active 类 并 为 每 个 链接 添加 
data-toggle="pil" 属 性 类 别 ， 便 可 以 实现 胶囊 导航 了 。 


【 例 20.5】 实例 文件 ，ch20\Chap20.5.html) 胶 训 导航 。 

<!DOCTYPE html> 

<html> 

<head> 

<title></title> 
<meta name="viewport" content="width=device-width, initial-scale=1, 

shrink-to-fit=no"> 

<link rel="stylesheet" href="bootstrap-4.1.3/css/bootstrap.css"> 
<script src="jquery.js"></script> 
<script src="bootstrap-4.1.3/js/bootstrap.bundle.js"></script> 
<script src="bootstrap-4.1.3/js/bootstrap.js"></script> 


</head> 

<body> 

<div class="container"> 
<p> 胶 赛 导航 </p> 


<!-- 在 ul 中 添加 .nav 和 .nav-pil1s，-.nav-pil1s 类 用 来 设置 胶囊 导航 --> 
<ul class="nav nav-pills"> 
<!-- 在 1i 中 添加 .nav-item， 在 a 中 添加 .nav-1ink， 对 于 选中 的 选项 添加 .active 类 
二 = 
<!-- 添 加 data-toggle="pil1" 属 性 类 别 ， 是 去 掉 a 标 签 的 默认 行为 ， 实 现 动态 切换 导 
航 的 active 属 性 效果 --> 
<1i class="nav-item"><a class="nav-link active" href="#" 
data-toggle="pil1"> 健 康 </a></1i> 
<1i class="nav-item"><a class="nav-link" href="#" 
data-toggle="pil1"> 时 尚 </a></1i> 
<1i class="nav-item"><a class="nav-link" href="#" 
data-toggle="pil1"> 减 肥 </a></1i> 
<li class="nav-item"><a class="nav-link" href="#" 
data-toggle="pil1"> 美 食 </a></1i> 
<li class="nav-item"><a class="nav-link" href="#" 
data-toggle="pil1"> 交 友 </a></1i> 
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<li class="nav-item"><a class="nav-link" href="#" 
data-toggle="pill"> 社 区 </a></1i> 
</ul> 
</div> 
</body> 
</html> 


在 正 11.0 浏览 器 中 运行 的 结果 如 图 20-12 所 示 。 


一 口 x 
间 ENaniN 王 友 \bootstral 只 -| 后 及 要 SN x | 
文件 (F) 注 辐 (FE) 查看 (V) 收藏 夫 (A) 工具 (Tm 。 帮助 (H) 
胶 圳 导航 


am 本 弹 > 美食 ”交友 ”社区 


图 20-12 ”胶囊 导航 


20.4.4 绑 定 导航 和 下 拉 菜 单 

在 Bootstrap 中 ， 下 拉 菜 单 可 以 与 页 面 中 的 其 他 元 素 绑 定 使 用 ， 如 导航 、 按 钮 等 。 

标签 页 导航 在 前 面 介 绍 过 ， 我 们 只 需要 在 标签 页 导航 选项 中 添加 一 个 下 拉 菜 单 结 构 ， 为 该 
标签 选项 添加 dropdown 类 ， 为 下 拉 菜 单 结构 添加 dropdown-menu 类 便 可 以 实现 。 


【 例 20.6】 《实例 文件 ，ch20\Chap20.6.html) 绑 定 导 航 和 下 拉 菜 单 。 


<!DOCTYPE html> 

<html> 

<head> 

<title></title> 
<meta name="viewport" content="width=device-width, initial-scale=1, 

shrink-to-fit=no"> 

<link rel="stylesheet" href="bootstrap-4.1.3/css/bootstrap.css"> 
<script src="jquery.js"></script> 
<script src="bootstrap-4.1.3/js/bootstrap.bundle.js"></script> 
<script src="bootstrap-4.1.3/js/bootstrap.js"></script> 


</head> 

<body> 

<div class="container"> 
<p> 绑 定 导航 和 下 拉 菜 单 </p> 


<!-- 在 ul 中 添加 .nav 和 -nav-tabs，-nav-tabs 用 来 设置 标签 页 导航 --> 
<ul class="nav nav-tabs"> 


<!-- 在 1i 中 添加 .nav-item， 在 a 中 添加 .nav-1ink， 对 于 选中 的 选项 添加 .active 类 
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<!-- 添 加 data-toggle="tab" 属 性 类 别 ， 是 去 掉 a 标 签 的 默认 行为 ， 实 现 动态 切换 导航 
的 active 属 性 效果 --> 


<1i class="nav-item"><a class="nav-link" href="#"3> 新 闻 </a></1i> 
<!--.dropdown-toggle 类 和 data-toggle="dropdown" 属性 类 别 用 来 激活 下 拉 
菜单 三 > 
<li class="nav-item"><a class="nav-link active dropdown-toggle" 
data-toggle="dropdown" href="#"> 教 育 </a> 
<!--.dropdown-menu 用 来 指定 被 激活 的 菜单 --> 
<ul class="dropdown-menu"> 
<li><a href="#" class="dropdown-item"> 初 中 </a></1i> 
<1i><a href="#" class="dropdown-item"> 高 中 </a></1i> 
<li><a href="#" class="dropdown-item"> 大 学 </a></1i> 


</ul> 
< 
<li class="nav-item"><a class="nav-link" href="#"> 旅 游 </a></1i> 
nav-item"><a class="nav-link" > 美食 </a></1i> 
nav-item"><a class="nav-link" > 理财 </a></1i> 
<li class="nav-item"><a class="nav-link" href="#"> 招 聘 </a></1i> 
</ul> 
</div> 
</body> 
</html> 


在 正 11.0 浏览 器 中 运行 的 结果 如 图 20-13 所 示 。 
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图 20-13 导航 和 下 拉 菜 单 绑 定 


20.4.5 面包 悄 导 航 


面包 居 导 航 〈Breadcrumbs) 是 一 种 基于 网 站 层次 信息 的 显示 方式 ， 它 表示 当前 页 面 在 导 
航 层次 结构 内 的 位 置 。 在 CSS 中 利用 ::before 和 content 来 添加 分 隔 符 。 


【 例 20.7】 《实例 文件 ，ch20\Chap20.7.html) 面包 居 。 
<!DOCTYPE html> 

<html> 

<head> 

<title> </title> 


<meta name="viewport" content="width=device-width, initial-scale=1, 
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shrink-to-fit=no"> 
<link rel="stylesheet" href="bootstrap-4.1.3/css/bootstrap.css"> 
<script src 


jquery.js"></script> 
<script src="bootstrap-4.1.3/js/bootstrap.bundle.js"></script> 
<script src="bootstrap-4.1.3/js/bootstrap.js"></script> 
<style> 
/* 利 用 : :before 和 content 添 加 分 隔 线 */ 
li::before { 
padding-right: 0.5rem; 
padding-left: 0.5rem; 
color: #6c757d; 
content: > /* 添 加 分 割 线 为 “>”*/ 


} 
/* 去 掉 第 一 个 1i 前 面 的 分 隔 线 */ 
li:first-child: :before { 
content: ""; /* 设 置 第 一 个 1i 元 素 前 面 为 空 */ 
} 
</style> 
</head> 
<body> 
<div class="container"> 
<!-- 在 ul 中 添加 .breadcrumb 类 ， 设 置 面包 居 --> 
<ul class="breadcrumb"> 
<1i><a href="#"> 学 校 </a></1i> 
<1i><a href="#"> 图 书馆 </a></1i> 
</ul> 
<ul class="breadcrumb"> 
<1i><a href="#"> 学 校 </a></1i> 
<1i><a href="#"> 图 书馆 </a></1i> 
<1i><a href="#"> 图 书 </a></1i> 
</ul> 
<ul class="breadcrumb"> 
<1i><a href="#"> 学 校 </a></1i> 
<1i><a href="#"> 图 书馆 </a></1i> 
<1i><a href="#"> 图 书 </a></1i> 
<1i><a href="#"> 编 程 类 </a></1i> 
</ul> 
</div> 
</body> 
</html> 


在 正 11.0 浏览 器 中 运行 的 结果 如 图 20-14 所 示 。 
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图 20-14 面包 居 导 航 


20.4.6 ”使 用 广告 屏 


通过 在 <div> 元 素 中 添加 .jumbotron 类 来 创建 jumbotron 超大 屏幕 ) ， 它 是 一 个 大 的 灰色 
背景 框 ， 里 面 可 以 设置 一 些 特殊 的 内 容 和 信息 ， 如 HTML 标签 、Bootstrap 的 元 素 等 。 如 果 想 
创建 一 个 没有 圆 角 的 jumbotron， 就 可 以 在 .jumbotron-fluid 类 的 div 中 添加 .container 
或 .container-fluid 类 来 实现 。 


【 例 20.8】 (实例 文件 :ch20\Chap20.8.html) 广告 屏 。 
<!DOCTYPE html> 
<html> 
<head> 
<title> </title> 
<meta name="viewport" content="width=device-width, initial-scale=1, 
shrink-to-fit=no"> 
<link rel="stylesheet" href="bootstrap-4.1.3/css/bootstrap.css"> 
<script src="jquery.js"></script> 
<script src="bootstrap-4.1.3/js/bootstrap.bundle.js"></script> 
<script src="bootstrap-4.1.3/js/bootstrap.js"></script> 
</head> 
<body> 
<!-- 添 加 .jumbotron 类 创建 广告 屏 --> 
<div class="jumbotron"> 
<h1> 北 京 欢 迎 你 !</h1> 
<p> 北 京 ， 简 称 “ 京 ”， 是 中 华人 民 共 和 国 的 首都 ， 文 化 中 心 、 科 技 创新 中 心 。</p> 
<hr> 
<p>Beijing, or "jing" for short, It isthe capital of the People's Republic 
of China, cultural center、 Technology innovation center.</p> 
<p> 
<!--.btn 类 为 按钮 添加 基本 样式 ，.btn-primary 表 示 原 始 按 钮 样式 (未 被 操作 ) --> 
<button class="btn btn-primary"> 了 解 更 多 </button> 
< /p> 
</div> 
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</body> 
</html> 


在 下 11.0 浏览 器 中 运行 的 结果 如 图 20-15 所 示 。 
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图 20-15 广告 屏 组 件 


20.4.7 使 用 card (卡片 ) 
通过 Bootstrap 4 的 .card 与 .card-body 类 来 创建 一 个 简单 的 卡片 ， 如 下 面 的 代码 所 示 。 


<!DOCTYPE html> 

<html> 

<head> 

<title></title> 
<meta name="viewport" content="width=device-width, initial-scale=1, 

shrink-to-fit=no"> 

<link rel="stylesheet" href="bootstrap-4.1.3/css/bootstrap.css"> 
<script src="jquery.js"></script> 
<script src="bootstrap-4.1.3/js/bootstrap.bundle.js"></script> 
<script src="bootstrap-4.1.3/js/bootstrap.js"></script> 

</head> 

<body> 

<div class="container"> 

<div class="card"> 

<div class="card-body"> 简 单 的 卡片 </div> 

</div> 

</div> 

</body> 

</html> 


在 正 11.0 浏览 器 中 运行 的 结果 如 图 20-16 所 示 。 
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图 20-16 简单 的 卡片 


卡片 是 一 个 灵活 的 、 可 扩展 的 内 容 窗口 ， 其 包含 了 可 选 的 卡片 头 和 卡片 脚 、 一 个 大 范围 的 
内 容 、 上 下 文 背景 色 及 强大 的 显示 选项 。 卡 片 代 蔡 了 Bootstrap 3 中 的 panel、well 和 thumbnail 
等 组 件 。 


【 例 20.9】 “实例 文件 ，ch20\Chap20.9.html) 卡片 。 


<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<meta name="viewport" content="width=device-width, initial-scale=1, 
shrink-to-fit=no"> 
<link rel="stylesheet" href="bootstrap-4.1.3/css/bootstrap.css"> 
<script src="jquery.js"></script> 
<script src="bootstrap-4.1.3/js/bootstrap.bundle.js"></script> 
<script src="bootstrap-4.1.3/js/bootstrap.js"></script> 
</head> 
<body> 
<div class="container"> 
<!-- 添 加 . card 类 创建 卡片 ，.bg-success 类 设置 卡片 的 背景 颜色 ，.text-white 设 置 卡 
片 的 文本 颜色 --> 
<div class="card bg-success text-white"> 
<!--.card-header 类 用 于 创建 卡片 的 头 部 样式 --> 
<div class="card-header"> 卡 片头 </div> 
<div class="card-body"> 
<!-- 给 <img> 添加 -card-img-top 可 以 设置 图 片 在 文字 上 方 或 添 
加 .card-img-bottom 设 置 图 片 在 文字 下 方 。-- 
<img src="004.jpg" alt="" width="100%" height="200px"> 
<h4 class="card-title"> 乡 间 小 路 </h4> 
p class="card-text"> 太 阳 西 下 ， 黄 昏 下 的 乡村 小 路 ， 弯 弯曲 曲 延伸 到 村 子 的 
尽头 ， 高 低 起 估 的 路 面 变 绿 丰 测 ， 只 有 吸 吸 吐 嘻 在 田间 嬉闹 的 麻 洗 ， 此 时 也 飞 得 无 影 无 踪 ， 大 地 只 留 下 
一 片 清凉 。</p> 
</div> 
<!--.card-footer 类 用 于 创建 卡片 的 底部 样式 --> 
<div class="card-footer"> 卡 片 脚 </div> 
</div> 
</div> 
</body> 
</html> 
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在 正 11.0 浏 览 器 中 运行 的 结果 如 图 20-17 所 示 。 


二 可 
rm oSa tt “加 


乡间 小 路 


| 
和 


20.4.8 使 用 进度 条 


进度 条 主要 用 来 表示 用 户 的 任务 进度 ， 如 下 载 、 删 除 、 复 制 等 。 


图 20-17 卡片 组 件 


创建 一 个 基本 的 进度 条 有 以 下 3 个 步骤 : 


t@ 册 添加 一 个 含有 .progress 类 的 <div>。 


名 到 在 上 面 的 <div> 中 添加 一 个 含有 .progress-bar 的 空 的 <div>。 
t@ 旨 为 含有 .progress-bar 类 的 <div> 添 加 一 个 带 有 百分比 表示 宽度 的 


style="50%"， 表 示 进度 条 在 50% 的 位 置 。 


【 例 20.10】〔 实 例文 件 ，ch20\Chap20.10.html) 简单 的 进度 条 。 


<!DOCTYPE html> 
<html> 
<head> 
<title></title> 


style 属性 ， 如 


<meta name="viewport" content="width=device-width, initial-scale=1, 


shrink-to-fit=no"> 


<link rel="stylesheet" href="bootstrap-4.1.3/css/bootstrap.css"> 
<script src="jquery.js"></script> 
<script src="bootstrap-4.1.3/js/bootstrap.bundle.js"></script> 


<script src="bootstrap-4.1.3/js/bootstrap.js"></script> 


</head> 
<body> 


<div class="container"> 


<p> 基 本 的 进度 条 </p> 


<div class="progress"> 
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<div class="progress-bar " style="width:50%"></div> 
</div> 
</div> 
</body> 
</html> 


在 正 11.0 浏 览 器 中 运行 的 结果 如 图 20-18 所 示 。 
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图 20-18 基本 的 进度 条 


1. 设置 高 度 和 添加 文本 
我 们 可 以 在 基本 进度 条 的 基础 上 设置 高 度 和 添加 文本 ， 即 在 含有 .progress 类 的 <div> 中 设 
置 高 度 ， 在 含有 .progress-bar 类 的 <div> 中 添加 文本 内 容 。 


【 例 20.11】〔 实 例文 件 ，ch20\Chap20.11.html〉 设 置 高 度 和 文本 的 进度 条 。 
<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<meta name="viewport" content="width=device-width, initial-scale=]1, 
shrink-to-fit=no"> 
<link rel="stylesheet" href="bootstrap-4.1.3/css/bootstrap.css"> 
<script src="jquery.js"></script> 
<script src="bootstrap-4.1.3/js/bootstrap.bundle.js"></script> 
<script src="bootstrap-4.1.3/js/bootstrap.js"></script> 
</head> 
<body> 
<div class="container"> 
<p> 设 置 高 度 和 文本 的 进度 条 </p> 
<!-- 设 置 进度 条 高 度 20px， 文 本 内 容 为 --60g%--> 
<div class="progress" style="height:20px"> 
<div class="progress-bar " style="width:60%">60%</div> 
</div><br> 
<!-- 设 置 进度 条 高 度 为 30px， 文 本 内 容 为 --80%--> 
<div class="progress" style="height:30px"> 
<div class="progress-bar " style="width:80%">80%</div> 
</div> 
</div> 
</body> 
</html> 
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在 正 11.0 浏览 器 中 运行 的 结果 如 图 20-19 所 示 。 
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图 20-19 设置 高 度 和 添加 文本 


2. 设置 不 同 的 背景 颜色 

进度 条 的 默认 背景 颜色 是 蓝 色 , 为 了 能 给 用 户 一 个 更 好 的 体验 , 进度 条 和 警告 信息 框 一 样 ， 
也 可 以 根据 不 同 的 状态 配置 不 同 的 进度 条 颜色 。 我 们 可 以 通过 添加 bg-success、bg-info 、 
bg-warning 和 bg-danger 类 来 改变 默认 背景 颜色 ， 分 别 表 示 浅 绿色 、 浅 蓝 色 、 浅 黄色 和 浅 红 色 。 


【 例 20.12】 “实例 文件 :ch20\Chap20.12.html) 设置 不 同 的 背景 颜色 。 

<!DOCTYPE html> 

<html> 

<head> 

<title></title> 
<meta name="viewport" content="width=device-width, initial-scale=1, 

shrink-to-fit=no"> 

<link rel="stylesheet" href="bootstrap-4.1.3/css/bootstrap.css"> 
<script src="jquery.js"></script> 
<script src="bootstrap-4.1.3/js/bootstrap.bundle.js"></script> 
<script src="bootstrap-4.1.3/js/bootstrap.js"></script> 


</head> 

<body> 

<div class="container"> 
<p> 不 同 颜色 的 进度 条 </p> 


<div class="progress"> 
<div class="progress-bar" style="width:30%"> 默 认 </div> 
</div> 
<br> 
<div class="progress"> 
<div class="progress-bar bg-success" 
style="width:40%">bg-success</div> 
</div> 
<br> 
<div class="progress"> 
<div class="progress-bar bg-info" style="width:50%">bg-info</div> 
</div> 
<br> 
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<div class="progress"> 
<div class="progress-bar bg-warning" 
style="width:60%">bg-warning</div> 
</div> 
<br> 
<div class="progress"> 
<div class="progress-bar bg-danger" 
style="width:70%">bg-danger</div> 
</div> 
</div> 
</body> 
</html> 


在 正 11.0 浏览 器 中 运行 的 结果 如 图 20-20 所 示 。 
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图 20-20 不 同 背景 的 进度 条 


3. 设置 动画 条 纹 进度 条 


还 可 以 为 进度 条 添加 progress-bar-striped 和 progress-bar-animated 类 , 即 为 滚动 条 添加 彩色 
条 纹 和 动画 效果 。 


【 例 20.13】〔 实 例文 件 ，ch20\Chap20.13.html) 设置 动画 条 纹 进 度 条 。 
<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<meta name="viewport" content="width=device-width, initial-scale=1, 
shrink-to-fit=no"> 
<link rel="stylesheet" href="bootstrap-4.1.3/css/bootstrap.css"> 
<script src="jquery.js"></script> 
<script src="bootstrap-4.1.3/js/bootstrap.bundle.js"></script> 


<script src="bootstrap-4.1.3/js/bootstrap.js"></script> 
</head> 


<body> 
<div class="container"> 
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<p> 设 置 进度 条 纹 效果 </P> 
<!-- 添 加 .progress 类 ， 创 建 进度 条 --> 
<div class="progress"> 
<!--.progress-bar-striped 类 设置 进度 条 条 纹 效果 ，.progress-bar-animated 
类 设置 条 纹 进度 条 的 动画 效果 --> 
<div class="progress-bar progress-bar-striped 
progress-bar-animated" style="width:60%"></div> 
</div> 
</div> 
</body> 
</html> 


在 正 11.0 浏览 器 中 运行 的 结果 如 图 20-21 所 示 。 
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图 20-21 带 条 纹 的 进度 条 


4. 混合 色彩 的 进度 条 
在 进度 条 中 ， 我 们 可 以 在 含有 .progress 类 的 <div> 中 添加 多 个 含有 .progress-bar 类 的 <div>， 
然后 分 别 为 每 个 含有 .progress-bar 类 的 <div> 设 置 不 同 的 背景 颜色 来 实现 混合 色彩 的 进度 条 。 


【 例 20.14】 “实例 文件 :ch20\Chap20.14.html) 混合 色彩 的 进度 条 。 
<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<meta name="viewport" content="width=device-width, initial-scale=]1, 
shrink-to-fit=no"> 
<link rel="stylesheet" href="bootstrap-4.1.3/css/bootstrap.css"> 
<script src="jquery.js"></script> 
<script src="bootstrap-4.1.3/js/bootstrap.bundle.js"></script> 
<script src="bootstrap-4.1.3/js/bootstrap.js"></script> 
</head> 
<body> 
<div class="container"> 
<p> 混 合 色彩 的 进度 条 </p> 
<div class="progress" style="height:30px"> 
<div class="progress-bar bg-success" 
style="width:20%">bg-success</div> 
<div class="progress-bar bg-info" style="width:20%">bg-info</div> 
<div class="progress-bar bg-warning" 
style="width:20%">bg-warning</div> 
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<div class="progress-bar bg-dqanger" 
style="width:20%">bg-danger</div> 
</div> 
</div> 
</body> 
</html> 


在 正 11.0 浏览 器 中 运行 的 结果 如 图 20-22 所 示 。 
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图 20-22 混合 色彩 的 进度 条 


20.4.9 ”使 用 模 态 框 


模块 框 是 一 种 灵活 的 、 对 话 框 式 的 提示 ， 是 页 面 的 一 部 分 ， 是 覆盖 在 父 窗 体 上 的 子 窗 体 。 
通常 是 显示 来 自 一 个 单独 源 的 内 容 ， 可 以 在 不 离开 父 窗 体 的 情况 下 有 一 些 互动 。 
模 态 框 的 基本 结构 如 下 面 的 代码 所 示 。 


<!-- 按 钮 一 一 用 于 打开 模 态 框 --> 
<button type="button" data-toggle="modal" 
data-target="#myModal">...</button> 
<! 一 -定义 模 态 框 --> 
<div class="modal fade" id="myModal"> 
<div class="modal-dialog"> 
<div class="modal-content"> 
<div class="modal-header">...</div> 
<div class="modal-body">...</div> 
<div class="modal-footer">...</div> 
</div> 
</div> 
</div> 
</div> 


在 上 面 的 结构 中 ， 按 钮 中 的 属性 类 别 分 析 如 下 。 


(1) data-toggle="modal": 用 于 打开 模 态 框 。 
(2) data-target="#myModal": 指定 打开 的 模 态 框 目标 (使 用 哪个 模 态 框 就 把 哪个 模 态 框 
的 id 写 在 其 中 ) 。 


定义 模 态 框 中 的 属性 类 别 分 析 如 下 。 
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(1) .modal 类 : 用 来 把 <div> 的 内 容 识 别 为 模 态 框 。 

(2) .fade 类 : 当 模 态 框 被 切换 时 ， 设 置 模 态 框 的 淡 入 淡出 。 
(3) id="myModal": 被 指定 打开 的 目标 id。 

(4) .modal-dialog: 定义 模 态 对 话 框 层 。 

(5) .modal-content: 定义 模 态 对 话 框 的 样式 。 

(6) .modal-header: 为 模 态 框 的 头 部 定义 样式 的 类 。 

(7) .modal-body: 为 模 态 框 的 主体 定义 样式 的 类 。 

(8) .modal-footer: 为 模 态 框 的 底部 定义 样式 的 类 。 

(9) data-dismiss="modal": 用 于 关闭 模 态 窗口 。 


【 例 20.15】〈 实 例文 件 : ch20\Chap20.15.html) 模 态 框 。 

<!DOCTYPE html> 

<html> 

<head> 

<title></title> 
<meta name="viewport" content="width=device-width, initial-scale=1, 

shrink-to-fit=no"> 

<link rel="stylesheet" href="bootstrap-4.1.3/css/bootstrap.css"> 
<script src="jquery.js"></script> 
<script src="bootstrap-4.1.3/js/bootstrap.bundle.js"></script> 
<script src="bootstrap-4.1.3/js/bootstrap.js"></script> 


</head> 

<body> 

<div class="container"> 
<h3> 模 态 框 </h3> 


<!-- 按钮 用 于 打开 模 态 框 --> 
<button type="button" class="btn btn-primary" data-toggle="modal" 
data-target="#myModal"> 


打开 模 态 框 
</button> 
<!-- 模 态 框 --> 


<div class="modal fade" id="myModal"> 
<div class="modal-dialog"> 
<div class="modal-content"> 
<! 一 模 态 框 头 部 -> 
<div class="modal-header"> 
<!--modal-title 用 于 设置 标题 在 模 态 框 头 部 垂直 居中 --> 
<h4 class="modal-title"> 用 户 注册 </h4> 
<button type="button" class="close" 
data-dismiss="modal">&gtimes;</button> 
</div> 
<!== 模 态 框 主体 ==> 
<div class="modal-body"> 
<form action="#"> 
<p> 姓 名 : <input type="text"></p> 
<p> 密 码 : <input type="password"></p> 
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<p> 邮 箱 : <input type="email"></p> 
</form> 
</div> 
<!-- 模 态 框 底部 --> 
<div class="modal-footer"> 
<button type="button"” class="btn btn-primary"> 提 交 </button> 
<button type="button" class="btn btn-secondary" 
data-dismiss="modal"> 
关闭 
</button> 
</div> 
</div> 
</div> 
</div> 
</div> 
</body> 
</html> 


在 正 11.0 浏览 器 中 运行 的 结果 如 图 20-23 所 示 ; 单 击 “ 打 开 模 态 框 ”按钮 激活 模 态 框 ， 效 
果 如 图 20-24 所 示 。 


- OO x 
咎 CNUserswdministrat P - CC 


臣 100% 


图 20-23 模 态 框 组 件 图 20-24 打开 模 态 框 效 果 


20.4.10 ”使 用 滚动 监听 


滚动 监听 即 根据 滚动 条 的 位 置 自动 更 新 对 应 的 导航 目标 。 
实现 滚动 监听 可 分 为 以 下 三 步 : 


(1) 设计 导航 栏 及 可 滚动 的 元 素 ， 可 滚动 元 素 上 的 id 值 要 匹配 导航 栏 上 超 链接 的 href 属 
性 ， 若 可 滚动 元 素 的 id 属性 值 为 “a”， 则 导航 栏 上 超 链接 的 href 属性 值 应 该 为 “#a”。 

(2) 为 想 要 监听 的 元 素 添加 data-spy="scroll" 属 性 类 别 ， 然 后 添加 data-target 属性 ， 它 的 
值 为 导航 栏 的 id 或 class 值 ， 这 样 才 可 以 联系 上 可 滚动 的 区 域 。 监 听 的 元 素 通常 是 <body>。 

(3) 设置 相对 定位 ， 使 用 data-spy="scroll" 的 元 素 需 要 将 其 CSS 的 position 属性 设置 为 
relative 才能 起 作用 。 


data-offset 属性 用 于 计算 滚动 位 置 时 距离 顶部 的 偏 移 像素 ， 默 认为 10 像素 。 
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【 例 20.16】“《 实 例文 件 ，ch20\Chap20.16.html) 滚动 监听 。 
<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<meta name="viewport" content="width=device-width, initial-scale=1, 
shrink-to-fit=no"> 
<link rel="stylesheet" href="bootstrap-4.1.3/css/bootstrap.css"> 
<script src="jquery.js"></script> 
<script src="bootstrap-4.1.3/js/bootstrap.bundle.js"></script> 
<script src="bootstrap-4.1.3/js/bootstrap.js"></script> 
<style> 
body { 
position: relative; 
} 
#navbart{ 
position: fixed; 
top:200px; 
right: SOpXs 
} 
</style> 
</head> 
<!-- 添 加 data-spy="scroll" 属性 类 别 ， 设 置 监听 元 素 --> 
<!--data-target="#navbar" 属 性 类 别 指定 导航 栏 的 id (navbar) --> 
<body data-spy="scroll" data-target="#navbar" data-offset="50"> 
<!--.navbar 设 置 导航 ，.bg-dark 类 和 .nav-dark 类 设置 黑色 背景 、 白 色 文字 --> 
<nav class="navbar bg-dark navbar-dark" id="navbar"> 
<!--.navbar-nav 是 在 导航 .nav 的 基础 上 重新 调整 了 菜单 项 的 浮动 与 内 外 边 距 。--> 
<ul class="navbar-nav"> 
<!-- 在 1i 中 添加 .nav-item ,在 a 中 添加 .nav-1ink 设 置 导航 的 样式 --> 
<1i class="nav-item"> 
<a class="nav-link" href="#s1">Section 1</a> 
= /> 
<1i class="nav-item"> 
<a class="nav-link" href="#s2">Section 2</a> 
</1i> 
<li class="nav-item"> 
<!--.dropdown-toggle 类 和 data-toggle="dropdown"” 属性 类 别 ， 用 来 激活 
下 拉 菜 单 --> 
<a class="nav-link dropdown-toggle" data-toggle="dropdown" 
href="#"> 
Section 3 
</a> 
<!--.dropdown-menu 用 来 指定 被 激活 的 菜单 --> 
<div class="dropdown-menu"> 
<!--.dropdown-item 添 加 列表 元 素 的 样式 --> 
<a class="dropdown-item" href="#s3">3.1</a> 
<a class="dropdown-item" href="#s4">3.2</a> 
</div> 
</1i> 
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</ul> 
</nav> 
<div id="s1"> 

<hl>Section 1</h1> 

<p><img src="005.jpg" alt="" width="300px" height="300px"></p> 
</div> 
<div id="s2"> 

<hl>Section 2</h1> 

<p><img src="006.jpg" alt="" width="300px" height="300px"></p> 
</div> 
<div id="s3"> 

<h1>Section 3.1</h1> 

<p><img src="007.jpg" alt="" width="300px" height="300px"></p> 
</div> 
<div id="s4"> 

<h1>Section 3.2</h1> 

<p><img src="008.jpg" alt="" width="300px" height="300px"></p> 
</div> 
</body> 
</html> 


在 正 11.0 浏览 器 中 运行 的 结果 如 图 20-25 所 示 。 当 滚动 滚动 条 时 ， 导 航 条 会 实时 监听 并 更 
新 当前 被 激活 的 菜单 项 ， 效 果 如 图 20-26 所 示 。 


[a x 本 口 
@ Bfle///E/ BINS/ PD ~ | EAE 司 二 @ EB Me///E/EM NE/ D | 大 六 吉 时 .| 图 
文 HF| 。 杭 引 人 E) 查看 (V) 收藏 突 A| 工具 (T) 帮 肌 (HI 文件 们 。 妨 生 (FE) ”查理 (V) ”区 限 sx(a)。 工 贞 (T) 其 助 [H) 
Section 1 8 


Section 3.2 
| 
Section 2 
图 20-25 ”滚动 前 图 20-26 滚动 后 


20.5 ”案例 实战 一 一 胶囊 导航 选项 卡 (Tab 栏 ) 


选项 卡 是 网 页 中 一 种 常用 的 功能 ， 当 用 户 点 击 或 悬浮 对 应 的 菜单 选项 时 ， 能 切换 出 对 应 的 


使 用 Bootstrap 框架 实现 胶 圳 导航 选项 卡 只 需要 以 下 两 部 分 内 容 便 可 完成 。 
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(1) 胶 圳 导航 组 件 ， 对 应 的 是 Bootstrap 中 的 nav-pills。 

(2) 可 以 切换 的 选项 卡 面板 ， 对 应 的 是 Bootstrap 中 的 tab-pane 类 。 选 项 卡 面板 的 内 容 统 
一 放 在 tab-content 容器 中 ， 而 且 每 个 内 容 面板 tab-pane 都 需要 设置 一 个 独立 的 选择 符 (ID ) 与 
选项 卡 中 data-target 或 href 的 值 匹配 。 


注意 ， 选 项 卡 中 链接 的 锚 点 要 与 对 应 的 面板 内 容 容器 的 ID 相 匹 配 。 


【 例 20.17】 “实例 文件 :ch20\Chap20.17.html) 胶 吉 导航 选项 卡 。 
<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<meta name="viewport" content="width=device-width, initial-scale=1, 
shrink-to-fit=no"> 
<link rel="stylesheet" href="bootstrap-4.1.3/css/bootstrap.css"> 
<script src="jquery.js"></script> 
<script src="bootstrap-4.1.3/js/bootstrap.bundle.js"></script> 
<script src="bootstrap-4.1.3/js/bootstrap.js"></script> 
</head> 
<body> 
<div class="container"> 
<h2> 胶 襄 导 航 选项 卡 </h2> 
<!-- 在 ul 中 添加 .nav 和 .nav-pil1s，.nav-pil1s 类 用 来 设置 胶囊 导航 --> 
<ul class="nav nav-pills"> 


<!-- 在 1i 中 添加 .nav-item， 在 a 中 添加 .nav-1ink， 对 于 选中 的 选项 添加 .active 类 


= 
<!-- 添 加 data-toggle="pill" 属 性 类 别 ， 是 去 掉 a 标签 的 默认 行为 ， 实 现 动态 切换 导 
航 的 active 属 性 效果 --> 
<!-- 给 每 个 a 标 签 的 href 属 性 添加 属性 值 , 用 于 绑 定 下 面 选项 卡 面 板 中 对 应 的 元 素 ， 当 导 
航 切 换 时 ， 显 示 对 应 的 内 容 --> 
<1li class="nav-item"><a class="nav-link active" data-toggle="pill" 
href="#tab1"> 图 片 1</a></1i> 
<li class="nav-item"><a class="nav-link" data-toggle="pill" 
href="#tab2"> 图 片 2</a></1i> 
<li class="nav-item"><a class="nav-link" data-toggle="pill" 
href="#tab3"> 图 片 3</a></1i> 
<li class="nav-item"><a class="nav-link" data-toggle="pill" 
href="#tab4"> 图 片 4</a></1i> 
</ul> 
<!-- 选 项 卡 面板 --> 
<!-- 选项 卡 面板 中 tab-content 类 和 .tab-pane 类 与 data-toggle="pil1" 一 同 使 用 ， 
设置 标签 页 对 应 的 内 容 随 胶 圳 导航 的 切换 而 更 改 --> 
<div class="tab-content"> 
<!-- .active 类 用 来 设置 胶囊 导航 默认 情况 下 激活 的 选项 所 对 应 的 元 素 --> 
<div id="tabl" class="tab-pane active"> 
<img src="01.png" alt=" 景 色 1"” class="img-fluid"> 
</div> 
<div id="tab2" class="tab-pane fade"> 
<img src="02.png”alt=" 景 色 2" class="img-fluid"> 
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</div> 
<div id="tab3" class="tab-pane fade"> 
<img src="03.png”alt=" 景 色 3" class="img-fluid"> 
</div> 
<div id="tab4" class="tab-pane fade"> 
<img src="04.png" alt=" 景 色 4" class="img-fluid"> 
</div> 
</div> 
</div> 
</body> 
</html> 


在 下 11.0 浏览 器 中 运行 的 结果 如 图 20-27 所 示 。 单 击 “nav4” 选 项 卡 切换 面板 内 容 ， 效 果 
如 图 20-28 所 示 。 


过 口 X i + 0 x 
人 CNusersAdministrat 只- 0 | BCAUsershdministra. 司 CNuserswdministnat P - © | EE CAsers\Administra, 和 
胶囊 导航 选项 卡 胶囊 导航 选项 卡 
nav1 


nav2 


nav1 nav2 nav3 


图 20-27 ”页面 加 载 完 成 后 效果 图 20-28 单 击 “nav4” 选 择 卡 


20.6 ”专家 解 惑 


1. 如 何 使 用 Bootstrap 创建 缩 略 图 ? 

使 用 Bootstrap 创建 缩 略 图 的 步骤 如 下 : 

(1) 在 图 像 周 围 添加 带 有 class .thumbnail 的 <a> 标签 。 
(2) 添加 4 个 像素 的 内 边 距 (padding) 和 一 个 灰色 的 边框 。 
(3) 当 鼠 标 悬 停 在 图 像 上 时 ， 会 动画 显示 出 图 像 的 轮廓 。 
2. 如 何 使 用 Bootstrap 实现 轮 播 效果 ? 


Bootstrap 轮 播 (Carousel) 插件 是 一 种 灵活 的 响应 式 的 向 站 点 添加 滑 块 的 方式 。 除 此 之 外 ， 
内 容 也 是 足够 灵活 的 ， 可 以 是 图 像 、 内 嵌 框 架 、 视 频 或 其 他 想 要 放置 的 任何 类 型 的 内 容 。 
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例如 以 下 代码 是 实现 一 个 简单 的 图 片 轮 播 效果 。 


<div id="myCarousel" class="carousel slide"> 
<!-- 轮 播 (Carousel) 指标 --> 
<ol class="carousel-indicators"> 
<1i data-target="#myCarousel" data-slide-to="0" 
class="active"></1i> 
<1Li data-targe 
<1Li data-target 
</ol1> 
<!-- 轮 播 (Carousel) 项 目 --> 
<div class="carousel-inner"> 
<div class="item active"> 
<img src="01.png”alt=" 第 1 幅 图 "> 
</div> 
<div class="item"> 
<img src="02.png" alt=" 第 2 幅 图 "> 
</div> 
<div class="item"> 
<img src="03.png" alt=" 第 3 幅 图 "> 
</div> 
</div> 
<!-- 轮 播 (Carousel) 导航 --> 
<a class="left carousel-control" href="#myCarousel" role="button" 
data-slide="prev"> 
<span class="glyphicon glyphicon-chevron-left" 
aria-hidden="true"></span> 
<span class="sr-only">Previous</span> 
</a> 
<a class="right carousel-control" href="#myCarousel" role="button" 
data-slide="next"> 
<span class="glyphicon glyphicon-chevron-right" 
aria-hidden="true"></span> 
<span class="sr-only">Next</span> 
</a> 
</div> 


"#myCarousel" data-slide-to="1"></1i> 
"#myCarousel" data-slide-to="2"></1i> 


效果 如 图 20-29 所 示 。 


图 20-29 图 片 轮 播 效果 


第 21 章 开发 计算 器 APP 


本 章 将 介绍 一 个 简洁 的 计算 器 项 目 ,该 项 目 涉及 HTMLS5 移动 应 用 程序 的 开发 操作 和 
最 终 完 成 一 个 APP 的 开发 ， 读 者 可 了 解 其 设计 思路 和 交互 实现 。 


21.1 项 目 概 述 


21.1.1 功能 梳理 


该 项 目 介绍 一 款 简单 易 用 的 计算 机 应 用 程序 , 它 是 使 用 纯 前 端 技术 开发 的 , 是 一 个 HIML5 


版 本 的 移动 APP， 可 通过 HBuilder IDE 打包 成 可 在 手机 上 安装 的 APK 安装 包 。 程 序 在 了 


F 机 上 


安装 后 ， 打 开 操作 界面 直接 进入 应 用 主页 面 ， 用 户 便 可 以 使 用 该 APP 提供 的 功能 了 。 该 APP 


提供 的 功能 如 下 : 


(1) 基本 的 计算 器 运算 功能 : 加 、 减 、 乘 、 除 、 取 余 、 清 空 、 后 退 等 。 
(2) 历史 运算 记录 查看 的 功能 。 

(3) “关于 ”页 面 的 展示 。 

(4) 按键 区 集成 拨号 打 电 话 的 功能 。 


21.1.2 ”开发 环境 
该 案例 的 开发 环境 配置 如 下 。 


(1) 系统 : Windows 10。 
(2) IDE: Hbuilder。 
(3) 开发 语言 : HTML5、JavaScript、CSS3。 


开发 环境 的 搭建 比较 简单 ， 在 HBuilder 官网 下 载 对 应 的 IDE， 运 行 项 目 即 可 。 
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21.1.3 项目 结构 目录 
使 


j HBuilder 打开 项 目 之 后 ， 整 个 项 目的 代码 结构 如 图 21-1 所 示 。 


v 四 计算 器 
vm css 
index.css 
> lm font 
v 项 images 
区 | delete.png 
vj 
v Szepto 
四 fxjs 
四 touchjs 
四 zepto.minjs 
四 calcjs 
中 commonjs 
国 jquery.minjs 
> unpackage 
图 indexhtml 
起 ] manifestjson 


图 21-1 计算 器 项 目 目录 


该 项 目的 代码 目录 按照 HBuilder 项 目 文件 结构 组 织 。 按 照 不 同 任务 的 功能 分 配 主 要 包括 : 


(1) css 包 目 录 下 包含 1 个 文件 ，index.css 是 本 项 目的 样式 文件 。 

(2) font 包 文件 ， 该 目录 下 的 代码 文件 是 本 项 目 中 所 用 到 的 字体 和 字体 图 标 文件 。 

(3) image 包 目 录 下 包含 1 个 文件 ，delete.png 是 本 项 目 中 所 用 的 图 片 资源 。 

(4) js 包 目 录 下 包含 4 个 文件 : zepto 包 目 录 包 含 了 该 APP 所 须 的 其 他 JavaScript 框架 ， 
calcjs 是 该 APP 中 相应 的 运算 或 数据 交互 的 处 理 ，common.js 是 所 须 的 工具 类 ，jquery.minjs 
是 用 到 的 jQuery 框架 。 

(5) unpackage 文件 夹 : 指定 不 被 打包 的 目录 或 文件 。 

(6) index.html: 该 项 目的 主页 。 

(7) manifestjson 文件 ， 本 项 目的 配置 文件 ， 内 容 涉 及 所 需 权限 等 。 


21.1.4 项目 打包 


HBuilder 默认 是 在 云端 打包 的 ， 也 就 是 将 代码 提交 上 去 进行 打包 ， 然 后 下 载 打 好 的 包 。 项 
目 打包 优点 : 不 管 机 器 配置 高 低 ， 只 要 网 速 快 都 可 以 很 快 打包 好 ， 当 然 也 可 以 进行 本 地 打包 ， 
那样 就 需要 Android 环境 和 IOS 环境 ， 这 里 不 做 推荐 。 

在 HBuilder 编辑 器 中 选择 “发 行 ” |“ 原生 APP- 云 端 打包 ”命令 ， 如 图 21-2 所 示 。 
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围 ch21/index.html - HBuilder xX 
文件 (F) 编辑 (E) 选择 ($) 查找 () 跳 转 (G) 运行 (R) 发 行 (J) 视图 (V) 工具 (T) 帮助 Y) 


悦 《 © ~ » 
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v css 3 日 <head lang 


快 应 用 -生成 rpk 文 件 (G) 
index.css 4 <meta ch: = 


图 21-2 HBuilder 编辑 器 
进入 到 “APP 云端 打包 ”窗口 ， 如 图 21-3 所 示 。 
TP w9 


App 云 论 打 包 ， 
和 从 下 他 三 二 3 双 件 ， 宇 号 区 改行 包 休 折 过 大 。 二 时 二 三 不 名 纤 ， 
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图 21-3 APP 云端 打包 

具体 的 选择 步骤 如 下 : 

1. 选择 平台 

选择 Android 或 IJOS， 或 者 两 者 都 有 。 

2. 选择 证 书 

如 果 只 是 练习 ， 可 以 选择 公用 证 书 ， 但 是 这 样 不 能 发 到 线 上 ; 如 果 要 发 布 到 线 上 ， 就 需要 
自己 申请 google 和 Apple 的 证 书 。 

3. 确认 打包 

单 击 “打包 ”按钮 ， 系 统 会 显示 打包 进度 。 当 打包 完成 后 可 以 手动 选择 下 载 到 本 地 地 址 ， 
下 载 完 成 后 就 可 以 安装 到 手机 运行 了 。 
21.1.5 项目 效果 展示 


打包 完成 后 ， 把 打包 好 的 APK 导入 到 手机 并 安装 ， 便 可 以 使 用 。 下 面 来 展示 一 下 项 目 
的 效果 。 
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首先 在 手机 中 打开 软件 ， 页 面 效果 如 图 21-4 所 示 。 
界面 的 右上 方 有 两 个 小 按钮 ， 当 点 击 左边 小 按钮 时 ， 将 弹出 关于 计算 器 的 说 明 ， 效 果 如 图 
21-5 所 示 ; 当 点 击 右边 小 按钮 时 ， 将 弹出 历史 记录 ， 效 果 如 图 21-6 所 示 ; 当 点 击 右 下 角 的 “ 删 


除 ” 按 钮 时 ， 


可 以 删除 历史 记录 ， 效 果 如 图 21-7 所 示 。 


3 
9%6=3| 

100-99=1 

96-6=90| 

96-55=41 

9%6=3| 

25x8=200| 

100x100=10000 
123456789+987654321=11 
9+6=1.5| 

证 


避 css 过 的 - 妆 计 可 


CO 荡 一 版 ， 有 午 更 新 


图 21-4 计算 器 主页 图 21-5 “关于 ”计算 器 图 21-6 历史 记录 


该 计算 器 还 有 一 个 功能 ， 当 输入 手机 号 码 后 长 按 = 可 以 拨打 电话 ， 如 图 21-8 所 示 。 


本 项 目 了 


图 21-7 清空 历史 记录 图 21-8 输入 手机 号 


21.2 项 目 设计 


E 要 由 index.html、index.css、calcjs 和 common.js 等 文件 组 成 ， 具 体内 容 请 参照 下 


面 的 代码 。 其 他 工具 类 的 代码 不 再 一 一 更 述 。 
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21.2.1 index.html 文件 
index.html 文件 是 项 目的 主页 面 ， 具 体 代码 如 下 所 示 。 


<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, user-scalable=no, 
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 
<link rel="stylesheet" href="css/index.css" /> 
<script src="js/zepto/zepto.min.js"></script> 
<script src="js/zepto/fx.js"></script> 
<script src="js/zepto/touch.js"></script> 
<script src="js/common.js"></script> 
<script src="js/calc.js"></script> 
</head> 
<body> 
<div id="container"> 
<div id="calc" class="calc"> 
<div id="top"> 
<div id="win-tool"> 
<a id="about" href="javascript:;" title=" 关 于 "><i id="au" 
class="iconfont about">g#xe610;</i></a> 
<a id="history" href="javascript:void(0);" title=" 历 史 "><i 
" class="iconfont history">&#xe60d;</i></a> 
</div> 
<div id="result"> 
<div id="express"></div> 
<div id="res">0</div> 
</div> 
</div> 
<div id="bottom"> 
<div class="row"> 
<span id="reset" data-number 
<span id="remove" data-number= 
<span data-number="%">%</span> 
<span data-number="/" class="tool chu">:</span> 
</div> 
<div class="row"> 
<span data-number="7">7</span> 
<span data-number="8">8</span> 
<span data-number="9">9</span> 
<span data-number="*" Class="tool cheng">x</span> 
</div> 
<div class="row"> 
<span data-number="4">4</span> 
<span data-number="5">5</span> 
<span data-number="6">6</span> 


id= 


">CE</span> 
—">~—</span> 
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<span data-number="-" class="tool jiang">—</span> 
</div> 
<div class="row"> 

<span data-number="1">1</span> 

<span data-number="2">2</span> 

<span data-number="3">3</span> 

<span data-number="+" class="tool add"> 十 </span> 
</div> 
<div class="row"> 

<span data-number="0" class="zero">0</span> 

<span data-number="." class="dian">.</span> 

<span id="equals" data-number="=" class="tool eq">= 


</span> 
</div> 
</div> 
<div id="historyBox"> 
<div class="con"> 
<ul></ul> 
</div> 
<div class="remove"> 
<a href="javascript:;"” title=" 清 空 历史 记录 "><i 
class="iconfont del">&#xe613;</i></a> 
</div> 
</div> 
</div> 
</div> 
<!-- 移 动 端 拨号 功能 --> 
<a href="#" id="telPhone" data-flag = 
</body> 
</html> 


></a> 


21.2.2 index.css 文件 
index.css 文件 是 项 目的 样式 文件 ， 具 体 代码 如 下 所 示 。 


@font-face { 
font-family: "iconfont'7 
src: url('../font/iconfont.eot'); /* IE9*/ 
src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'), 
/* IE6-IE8 */ 
url('../font/iconfont.woff') format('woff'), /* chrome、 firefox */ 
url('../font/iconfont.svg#iconfont') format('svg'); /* i0OSsS 4.1- */ 
url('../font/iconfont.ttf') format('truetype'), /* chrome、 firefox、 
opera、 Safari, Android, iOS 4.2+*/ 
了 
-Iconfont1{ 
font-family:"iconfont" !important; 
font-size:1.9rem; 
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font-style:normal7 
-Webkit-font-smoothing: antialiased7 
-Webkit-text-stroke-width: 0.2px; 
-moz-osXx-font-smoothing: grayscale; 
vertical-align: middle; 

} 

html{ 
height: 100%; 
font-size: 62.5%; 

} 

.maxhtml {font-size: 82.5%;} 

body{ 
height: 100%; 
min-width: 300px; 
position: relative; 
padding: 0; 
margin: 0; 
font-size: 62.5%; 

} 

ul {padding: 0;margin: 0 

#container { 
overflow: hidden; 
padding: 5px 5px; 


} 


} 

ealc tf 
width: 300px; 
max-width: 600px; 
margin: Opx auto; 
display: flex; 
flex-direction: column; 
border-radius: 5px; 
flex-wrap: wrap; 
height: 100%; 
transitaon: all SS 
overflow: hidden; 
z-index: 07 
position: relative; 

| 

/* 计 算 器 顶部 工具 栏 的 样式 */ 

#top { 
display: flex; 
justify-content: flex-start; 
flex-direction: column; 
position: relative; 
width: 100% 
height: 30% 


/* 工 具 栏 中 按钮 的 样式 */ 
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#win-tool { 
background-color: #242424; 
min-height: 35px; 
position: relative; 
padding: 7px 8px 0 8px; 
text-align: right; 
width: 100%; 
box-sizing: border-box; 

} 

#win-tool a { 
background: hsl(0, 0%, 80%); 
display: inline-block; 
width: 2rem; 
border-radius: 10px; 
text-align: center; 
color: inherit; 
text-decoration: none; 
font-family: "微软 雅 黑 "; 
text-shadow: lpx lpx 2px rgba(0，0，0，0.5); /* 设 置 阴影 */ 
margin-left: .Srem; 

} 

/* 计 算 器 数据 显示 的 样式 */ 

#result { 
min-height: 90px; 
width: 100%; 
height: 100%; 
display: flex; 
flex-direction: column; 
justify-content: flex-end; 
color: #000; 
overflow: auto; 
box-sizing: border-box; 
text-align: right; 

3 

#result > #express { 
font-size: 2rem; 

} 

#result div { 
padding: 0 Spx; 
box-sizing: border-box; 

} 

#result > #res { 
font-size: 4.5rem; 
font-weight: 600; 
width: 100%; 

上 

/* 计 算 器 键盘 的 样式 设计 */ 

#bottom { 
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font-weight: 600; 
width: 100% 


#bottom .row { 
height: 20%; 
width: 100%; 
display: flex; 
box-sizing: border-box; 
margin-bottom: -lpx; 

} 

#bottom .row span:first-child { 
border-left: 0; 

} 

#bottom .row:last-child span { 
border-bottom: 0; 

} 

#bottom .row spant{ 
height: 100%; 
width: 25%; 
background-color: #AAAAAA; 
border: lpx solid #fff; 
border-right: 0; 
color:hsl(0, 17%, 20%); 
font-size: 2rem; 
line-height: 5rem; 
cursor: default; 
-Webkit-user-select: none; 
display: flex; 
align-items: center; 
justify-content: center; 

} 

/* 设 置 加 、 减 、 乘 、 除 、 等 号 的 样式 */ 

#bottom .row span.tool { 
background-color: #4CD964; 
color: #fff; 

} 

/* 清 空 历史 记录 页 面 样式 */ 

#historyBox { 
background: hsl(0, 0%, 95%); 
width: 100%; 
height: 71%; 
position: absolute; 
z-index:. 10» 
left: 0; 
bottom: 0; 
box-shadow: Opx Opx 10px #000; 
Eransitions all 33 
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transform: translateY (102%); 
font-family: "微软 雅 黑 "; 
’ 
#historyBox .con { 
height: 91%; 
overflow-y: auto; 
} 
#historyBox .remove { 
height: 28px; 
background: hsl(0, 0%, 88%); 
text-align: right; 
box-sizing: border-box; 
border-top: lpx solid transparent; 
position: absolute; 
width: 100%; 
left: 0; 
bottom: 0; 
} 
/* 清 空 历史 记录 div 标 签 中 a 的 样式 */ 
#historyBox .remove af 
color: inherit; 
text-decoration: none; 
padding-right: Spx; 
| 
/* 设 置 历史 记录 中 ul 的 样式 */ 
#historyBox ul { 
padding: 0 5px 0 Spx; 
color: hsLl(0, (0% SO%)S 
font-size: lrem; 
3 
/* 设 置 历史 记录 中 1i 的 样式 */ 
#historyBox ul 1i { 
height: 45px; 
text-align: right; 
line-height: 45px; 
font-size: 2.2rem; 
font-family: "微软 雅 黑 "; 
background: hsl(0, 0%, 95%); 
color: #000; 
overflow: auto; 
} 
/* 使 用 媒体 查询 来 设计 页 面 屏幕 宽度 小 于 500px 的 页 面 样式 */ 
@media (max-width: 500px){ 
html { 
font-size: 80%; 
font-family:Helvetica; 
} 


.iconfont {font-size: 1.6rem;} 
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#container { 
height: 100%; 
padding: 0; 
} 
cale { 
width: 100%; 
height: 100%; 
max-width: none; 
border-radius: 0; 
#win-tool a {font-size: lrem;line-height: 1.9rem;} 
#resize { 
left: 8px; 
font-size: 3.5rem; 
line-height:1.1lrem !important; 
box-shadow: none !important; 
display: inline-block !important;} 
#bottom .row {margin: 0;} 
#bottom .row span { 
box-sizing: border-box; 
border-top: 0; 
} 
#bottom .row span.cheng { 
font-size: 2.1rem; 
} 
#bottom .row span.zero { 
width: 50.1%; 


有 


21.2.3 calc.js 文件 
calc.js 文件 是 该 APP 中 相应 运算 或 数据 交互 的 处 理 ， 有 具体 请 看 下 面 的 代码 及 注释 。 


// app 配 置信 息 

window.onload = function(){ 
clickFunc() ;// 点 击 功能 

}; 

function clickFunc(){ 
var container = document .getElementById ("container"); 
Var calc = document .getElementById("calc"), 


spans = 
document .getElementById ("win-tool") .getElementsByTagName ("span"), 
equals = document .getElementById ("equals"), // 等 于 符号 
remove = document .getElementById ("remove"); // 删 除 符号 
// 两 个 小 按钮 
// var close = document .getElementById("close")， // 关 闭 按钮 


var resultDiv = document .getElementById("result"); // 结 果 区 域 
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// 历史 记录 
var historyBox = document getElementById ("historyBox"), 
delBtn = historyBox.querySelector(".remove a"); 
Var historyUl = historyBox.querySelector ("ul"); 
// 关闭 按钮 
close.onclick = function(e){ 
var h = calc.offsetHeight + 15; 
calc.style.WebkitTransform = "translateY("+ h+"px)"; 
calc.style.transform = "translateY ("+ ht+"px)"; 
e.stopPropagation(); 
}; 
// 点 击 键 盘 
Var keyBorders = document .querySelectorAll ("#bottom span"), 
express = document .getElementById ("express"),// 计 算 表 达 式 
res = document.getElementById("res") ， // 输 出 结果 


keyBorde = null; // 键 盘 
Var preKey = "", // 上 一 次 按 的 键盘 
isFromHistory = false; // 是 否 来 自 历史 记录 
// 符 号 
th oo ed ph oh se edd ed et de 二 吕 和 大 
// 键盘 按钮 


for (var j=0; j <keyBorders.length; j++){ 
keyBorde = keyBorders[j]; 
keyBorde.onclick = function() { 
var number = this.dataset["number"]; 
clickNumber (number); 
}; 
} 
// 点 击 键 盘 进 行 输入 
// eparam {string} number 输入 的 内 容 
function clickNumber (number){ 
Var resVal = res.innerHTML; // 结 果 
var exp = express.innerHTML; // 表 达 式 
// 表 达 式 最 后 一 位 的 符号 
var expressEndSymbol = exp.substring (exp.length-1,exp.length); 
// 点 击 的 不 是 删除 键 和 复位 键 时 才能 进行 输入 


if (number !== "<—" || number !== "C"){ 

// 是 否 已 经 存在 点 了 ， 如 果 存在 ， 就 不 能 接着 输入 点 号 了 , 且 上 一 个 字符 不 是 符号 字符 
Var hasPoint = (resVal.indexof('.') !== -1)?true:false; 
if(hasPoint && number === '.'){ 


// 上 一 个 字符 如 果 是 符号 ， 变 成 0 .xxx 形 式 

if(symbol [preKey]){ 
res.innerHTML = "0"; 

}elsef{ 
return false; 

上 

} 
// 转 换 显示 符号 
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if(isNaN (number) )1{ 
number = number.replace(/\*/g,"x") .eplace(/\/V/gv "=") 7 
上 
// 如 果 输 入 的 都 是 数字 ， 那 么 当 输 入 达到 固定 长 度 时 不 能 再 输入 了 
if(!symbol [number] && isResOverflow(resVal.length+1)){ 
return false; 
} 
// 点 击 的 是 符号 
// 计 算 上 一 次 的 结果 
if (symbol [number]){ 
// 上 一 次 点 击 的 是 不 是 符号 键 


if(preKey !== "=" && symbol [PreKey])1{ 
express.innerHTML = exp.slice(0,-1) + number; 
}elsef 
MOxpe = 
express.innerHTML = resVal + number; 
}else{ 


express.innerHTML += resVal + number; 
} 
if(symbol [expressEndSymbol1]){ 
exp = 
express.innerHTML.replace(/x*/g,"*") .replace (/:/,"/"); 
res.innerHTML = eval (exp.slice(0,-1)); 
} 
} 


}else{ 
// 如 果 首 位 是 符号 ，0 
if((symbol [number] || symbol [preKey] || resVal=="0") && 
number !== "'.'"'){ 


res.innerHTML = ""; 
} 
res.innerHTML += number; 
1) 
preKey = number; 
} 
， 
// 相等 ， 计 算 结果 
equals .onclick = function(){ 
calcEques (); 
}; 
function calcEques(){ 
Var expVal = express.innerHTML, val = ""; 
Var resVal = res.innerHTML; 
// 表 达 式 最 后 一 位 的 符号 
IE (expVal) { 
Var expressEndSymbol = 
expVal .substring (expVal.length-1,expVal.length); 
tryt{ 
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if(!isFromHistory)t{ 

Var temp = ""; 

if(symbol [expressEndSymbol] && resVal){ 
temp = expVal.replace(/x/g,"*") .replace(/:/,"/"); 
temp = eval (temp.slice(0,-1)) + 

Symbol [expressEndSymbol] + resVal; 

}else{ 
temp = expVal.replace(/x/g,"*") .replace(/:/,"/"); 

} 


val = eval (temp); 
}elsef{ 
val = resVal; 


} 
}catch (error){ 
val = "<span style='font-size:lem;color:red'>Erro: 计算 出 错 ! 
</span>"; 
}finallyt{ 
express.innerHTML = ""; 
res.innerHTML = val; 
preKey = "="; 
saveCalcHistory (expVal+resVal+"="+Val) 7 
isResOverflow (resVal.length); 
isFromHistory = false; 


} 
. 
// 移动 端 拨号 功能 
// 移 动 端 长 按 事件 
$ (equals) .on ("longTap", function(){ 
//console.log("sdsdsd"); 
Var num = res.innerHTML; 
if(num && num !== "0"){ 
var regx = /^1[0-9] {2}[0-9] {8}$/; 
if(regx.test (num)){ 
//console.1og ("是 手机 号 码 "); 
var telPhone = document .getElementById ("telPhone"); 
telPhone.href = "tel:"+num; 
telPhone.target = " blank"; 
telPhone.click(); 


} 
1); 
// 复位 操作 
var resetBtn = document.getElementById("reset"): 
resetBtn.onclick = function(){ 
res.innerHTML = "0"; 
express.innerHTML = ""; 


}; 
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// 减 位 操作 
remove.onclick = function(){ 
Var tempRes = res.innerHTML; 
if (tempRes.length>1){ 
tempRes = tempRes.slice(0,-1); 
res.innerHTML = tempRes; 
jelsef 
res.-innerHTML = 0; 
} 
}; 
// 历史 功能 
var history = document .getElementById("history"), 
historyBox = document .getElementById ("historyBox"); 
var about = document .getElementById("about"); 
about .onclick = history.onclick = function(e)1{ 
e=e || window.event; 
var target = e.target.id || window.event.srcElement.id; 
historyBox.style.WebkitTransform = "none"; 
historyBox.style.transform = "none"; 
e.stopPropagation(); 
// 点 击 的 是 历史 
if(target == "h"){ 
// 恢 复 显示 删除 按钮 
delBtn.style.display = "inline-block"; 
Var keyArray = Mybry.wdb.getKeyArray(); 
Var separate = Mybry.wdb.constant .SEPARATE; 
keyArray.sort (function(a,b){ 
var n = a.split (separate) [1]; 
var m = b.split (separate) [1]; 
Eeturcn me ny 
es 
Var html = [],val = ""; 
for (var i=0; i<keyArray.length; i++){ 
val = Mybry.wdb.getItem(keyArray[i]); 
html .push ("<li>"+val+"</1i>"); 
| 
if (html .length>0) 1{ 
historyU1l .innerHTML 
}elsef 
historyUl .innerHTML 


html. join(™) 


" 尚 无 历史 记录 "; 


} 
// 把 历史 记录 一 条 数据 添加 到 计算 器 
Var hLis = historyUl .querySelectorAll ("1i"); 
for (var i=0; i<hLis.length; i++){ 
hLis[i].onclick = function(){ 
Var express = this.innerHTML; 
Var exp = express.split("=") [0], 
res = express.split("=") [1]; 
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resultDiv.querySelector ("#express") .innerHTML = exp; 
resultDiv.querySelector ("#res") .innerHTML = res; 
isFromHistory = true; 


}; 


} 
if(target == "au"){ 
// 取 消 删除 按钮 显示 
delBtn.style.display = "none"; 
historyBox.children[0] .children[0] .innerHTML = "<div 
style='padding:5px;color:#000;'>" 
+ "<p><i class='iconfont'>&#xe60f;</i> 纯 CSS 打 造 的 一 款 计算 器 
</p>" 
+ "<p><i class='iconfont'>&#xe60f;</i> 第 一 版 有 待 更 新 </p>" 
/dv 
// 检 查 新 版 本 
updateapp (); 


}; 
window.onclick = function(e){ 
var e = e || window.event; 
var target = e.target.className || e.target.nodeName; 
var notTarget = 
{"con":"con", "remove":"remove", "UL": "UL","P 
if(!notTarget [target]){ 
// 如 果 设 置 了 最 小 化 
var ts = historyBox.style.transform || 
historyBox.style.WebkitTransform; 
if(ts && ts == "none"){ 
historyBox.style.WebkitTransform = "translateY (102%)"; 
historyBox.style.transform = "translateY (102%)"; 


p"}; 


j 


} 

// 恢 复 显示 删除 按钮 

//historyBox.children[1] .children[0] .className = "icon del"; 
}; 
// 清空 历史 记录 
delBtn.onclick = function(e){ 

var e = e || window.event; 


e.stopPropagation(); 
if (Mybry.wdb.deleteItem("*")){ 
historyUl.innerHTML = “" 尚 无 历史 记录 "; 
} 
3 
// 保存 计算 历史 记录 
// eparam val 要 记录 的 表达 式 
function saveCalcHistory (val){ 
var key = Mybry.wdb.constant.TABLE NAME + 
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Mybry .wdb .constant .SEPARRATE + Mybry.wdb.getId(); 
window.localStorage.setItem(key,val); 
| 
// 自动 设置 文字 大 小 
function isResOverflow(leng){ 
Var calc = document .getElementById("calc"); 


var w = calc.style.width || getComputedStyle (calc) .width || 
calc.currentSstyle.width; 


Ww = parseInt (w); 


// 判 断 是 否 是 移动 端 
ifE((Mybry.browser.versions .android || 
Mybry.browser.versions.iPhone || Mybry.browser.versions.iPad) 


&& !symbol [preKey]) { 
if(leng > 15){ 
return true; 
} 
}else{ 
if(leng > 10){ 
if(w == 300) { 
maxCalc(); 
}elsef{f 
if(leng > 16){ 
return true; 


] 


return false; 


} 
21.2.4 common.js 文件 
common.js 文件 是 项 目 所 需 的 工具 类 ， 具 体 请 看 下 面 的 代码 和 注释 。 


window.Mybry = {}; 
Mybry.transitionEnd = function(dom,callback){ 
// 工 .给 谁 加 过 渡 结 束 事件 
// 2. 过 渡 结 束 之 后 我 们 需要 去 做 什么 事情 
// 基 本 的 判断 
if(!dom || typeof dom != "object' ) return false; 
dom.addEventListener('transitionEnd',function(){ 
callback && callback(); // 处 理 业务 
es 
dom.addEventListener('WebkitTransitionEnd', function(){ 
callback && callback(); // 处 理 业 务 
Ts 
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// 移 动 端 单 击 事件 
Mybry.tap = function(dom,callback){ 
// 基 本 的 判断 
if(!dom 11 typeof dom != "object' ) return false; 


var startTime = 0,isMove = false; 

dom.addEventListener('touchstart', function(e){ 
startTime = Date.now(); 

}); 

dom.addEventListener('touchmove',function(e){ 
isMove = true; 

1); 

dom.addEventListener('touchend', function(e){ 
if((Date.now()-startTime) < 150 && !isMove){ 

callback && callback(e); // 处 理 业务 

} 
startTime = 0,isMove = false; // 重 置 参数 

3 

Mybry.wdb = { 


// 自 定义 key 的 标识 

constant : { 
TABLE NAME:"calc", // 表 名 称 
SEPARATE:"—" // 分 隔 符 


}， 
// 获 取 数 据 库 最 新 的 ID， 递 增 
getId : function(){ 
var id = 0; //key 的 索引 
Var appDataKey = this.getKeyArray(); 
Var spearate = this.constant .SEPARATE; 
if(appDataKey.length>0){ 
var indexArray = []; // 所 有 的 索引 值 
for (var i=0; i<appDataKey.length; i++){ 


indexArray.push (ParseInt (appDataKey[i] .split (spearate) [1])); 
} 
id = this. maxId(indexArray) + 1; 
} 
return id; 
3 
// 获 取 单 个 数据 ， 索 引 或 key 的 名 称 
getItem : function(value){ 
if(!value) return false; 
if(isNaN(value)){ 
return localStorage.getItem(value); 
}else{ 
Var key = localStorage.key (ParseInt (value)); 
return localStorage.getItem(key); 
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5 
deleteItem : function(value)1{ 
if(!value) return false; 
if(isNaN(value)){ 
// 如 果 输 入 * 号 ， 删 除 所 有 数据 
if (value === "*"){ 
Var appDataKey = this.getKeyArray (); 
for (var i=0; i<appDataKey.length; i++){ 
localStorage.removeItem(appDataKey[i]); 
} 
}else{ 
localStorage.removeItem(value); 
} 
}else{ 
Var key = localStorage.key (parseInt (value)); 
localStorage .removeItem (key); 
} 
return trues 
}, 
_maxId : function(array){ 
if(!array) return false; 
if(!Array.isArray (array)) return false; 
array.sort (function(a,b){ 
returna-b; 
1); 
return arrayl[larray.length-1]; 
}, 
getKeyArray : function(){ 
Var localStorage = window.localStorage; 
Var storageLen = localStorage.length; 
var spearate = this.constant .SEPARATE, 
tableName = this.constant.TABLE NAME; 
// 计 算 器 所 有 的 数据 
Var appDataKey =[]; 
if (storageLen>0)1{ 


Var itemKey = ""; 
for (var i=0; i<storageLen; i++){ 
//calc-0 
itemKey = localStorage.key (i); 
// 判 断 是 否 是 该 应 用 的 数据 
var flagIndex = itemKey.indexOf (spearate); 
if(flagIndex != -1 ){ 
Var startWord = itemKey.split(spearate) [0]; 
if(startWord == tableName){ 


appDataKey .push (itemKey); 
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} 
return appDataKey; 


Mybry.browser = { 
versions: function () { 
var u = navigator.userAgent, 
app = navigator.appVersion; 
return { 


// 移 动 终端 浏览 器 版 本 信息 
trident: u.index0of ('Trident') > -1，//IE 内 核 
presto: u.indexof('Presto') > -1，//opera 内 核 
WebKit: u.indexof ('appleWebKit') > -1，// 苹 果 、 谷 歌 内 核 
gecko: u.indexOf ('Gecko') > -1 && u.indexOf('KHTML') == -1, // 
火狐 内 核 
mobile: !!'u.match(/appleWebKit.*Mobile.*/) 
11 !!u.match(/appleWebKit/)，// 是 否 为 移动 终端 
ios: !!u.match(/\ (i[^;]+;( U;)? CPU.+Mac 0S X/)，//ios 终 端 
android: u.indexOf ('Android') > -1 || u.indexof('Linux') > -1, 
//android 终 端 或 uc 浏览 器 
iPhone: u.indexOf ('iPhone') > -1 || u.indexOf('Mac') > -1, // 
是 否 为 iPhone 或 QQHD 浏 览 器 
iPad: u.index0f ('iPad') > -1，// 是 否 iPad 
Webapp: u.index0f ('Safari') == -1 // 是 否 Web 应 该 程序 ， 没 有 头 部 与 底部 
于 
人 
language: (navigator.browserLanguage || 
navigator.language) .toLowerCase () 


} 
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本 章 将 介绍 一 款 求职 招聘 的 手机 网 站 , 使 用 
色 ” 为 主 色调 ， 简 约 时 尚 。 


jQuery Mobile 框架 来 制作 。 本 项 目 设计 以 “ 绿 


22.1 ”项 目 概述 


该 手机 网 站 项 目 主要 包含 登录 、 注 册 、 个 人 中 心 、 简 历 预览 、 简 历 编辑 、 投 递 记录 、 职 位 
收藏 、 职 位 列表 、 职 位 详情 等 页 面 。 


22.1.1 项 目 结构 目录 
本 项 目的 目录 结构 如 图 22-1 所 示 。 


jqueryjs 
最 jquery.moble-145js 
ml 


indexht 


图 22-1 目录 结构 
具体 内 容 如 下 所 示 。 


(1) css 文件 夹 : 包含 了 jQuery Mobile 提供 的 图 标 (images) 和 CSS 文件 ， 以 及 自 定义 
主题 样式 表 style.css。 特 别 要 注意 ，jQuery Mobile 提供 的 


图 标 和 CSS 文件 必须 在 同一 个 目录 ， 
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否则 项 目 中 使 用 的 图 标 将 不 显示 。 
(2) image 文件 夹 : 项 目 使 用 的 图 片 。 
(3) js 文件 夹 : 包含 jQueryjs 和 jQuery Mobilejs 文件 。 
(4) index.html: 登录 页 面 。 
(5) jlbj.html: 简历 编辑 页 面 。 
(6) login.html: 注册 页 面 。 
(7) personal.html: 个 人 中 心 页 面 。 
(8) tdjlLhtml: 投递 简历 页 面 。 
(9) yulan.html: 简历 预览 页 面 。 
(10) zwlb.html: 职位 列表 页 面 。 
(11) zwsc.html: 职位 收藏 页 面 。 
(12) zwxq.html: 职位 详情 页 面 。 


22.1.2 项目 效果 展示 


使 用 Opera Mobile Emulator 模拟 器 来 展示 本 项 目 效果 。 打开 模拟 器 , 选择 “LG Optimus 3D” 
启动 ， 把 index.html 文件 拖 入 模拟 器 ， 页 面 效 果 如 图 22-2 所 示 。 

该 页 面 是 登录 页 面 ， 用 户 进入 可 以 选择 登录 或 注册 ， 当 单 击 “ 免 费 注册 ”按钮 时 ， 将 进入 
注册 页 面 ， 效 果 如 图 22-3 所 示 。 在 该 页 面 编辑 注册 信息 ， 选 中 “同意 《我 们 的 协议 》” 复 选 
框 ， 单 击 【 免 费 注册 】 按 钮 ， 将 返回 登录 页 面 ， 用 户 可 以 进行 登录 。 


©@ opera Mobi. — 口 X ©@ opera Mobil.. 一 口 让 
file://localhosVE:/anli/ 源 请 
fileyWlocalhosvE/anli/ 源 克基 Gooale 
《< _ 通 加 注册 
姓名 
姓名 
ED 名 称 
请 输入 用 F 
加 码 
室 码 
多 
请 输入 
言 记 由 码 ? 加 下 次 自动 轨 录 邮箱 


网 意 《 我 们 的 协议 》 


一 a | 


免费 注册 
Ee Ss 忆 到 - 
LG Opti 504x80C ppl: 216 [D3| [50% “| LG opti 504x80C ppl: 216 [Gs [50% =| 
图 22-2 ”登录 页 面 效果 图 22-3 注册 页 面 效 果 
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户 填 好 信息 ， 单 击 “ 登 录 ” 按 钮 ， 将 进入 “个 人 中 心 ” 页 面 ， 效 果 如 图 22-4 所 示 。 单 
击 “ 切 换 账 号 ”按钮 ， 将 进入 用 户 登 录 界 面 ， 可 以 选择 注册 或 登录 。 

在 “个 人 中 心 ” 页面 中 单 击 简历 预览 进入 “简历 预览 ”页 面 ， 效 果 如 图 22-5 所 示 。 在 “ 简 
历 预 览 ”页 面 中 单 击 “ 投 递 简历 ”按钮 进入 “职位 列表 ”页 面 ， 效 果 如 图 22-6 所 示 。 在 职位 


列表 中 可 以 搜索 要 查找 的 职位 ， 如 在 搜索 框 中 输入 “java”， 列 表 会 筛选 出 与 java 相关 的 列表 ， 
如 图 22-7 所 示 。 
@operaMobi. — OO x @operaMobi. 一 OO x @opeaMo. —- OO x 
< 加 
Crm Ge 
< 个 人 中 心 MR 1 要 本 信息 《 职位 列表 
Ry 痊 名: 林 欢 欢 Q 提 索 
性 别 : 女 
出 生日 期 : 1995 年 11 月 8 日 web 前 端 开发 工程 师 
类 旭 杖 况 ;未 冰 aR © 
林政 网 民族 : 汉 :toooa000F/ 月 
身 高 : 172cm 北京- 种 J2 区 | 工作 1- 2 年 
ee © 毕业 院 校 “北京 清华 大 学 
人 简历 编辑 © 专业 : 土木 工程 java 软 件 工程 师 
最 高 学 历 ; 本 科 sn 
了 投 遂 记录 ‘© 手机 : 12344445555 :aoooo0oo 交 月 © 
a i 4 FIT 
会 2 E Ed yy， 
3 关于 WR 四 mm 二 页 | 类 于 Mh 加 
人 晤 团 - 让 口 国 - 中 口 国 - 
iG op 506x80C Ppt: 216 [Ds [50% ~ iG Optit 504x80C ppt: 216 [a] [50% ~ iG op 480x80 Ppl: 21¢ [G3] [50% ~ 


图 22-4 个 人 中 心 页 面 效果 图 22-5 简历 预览 页 面 效果 图 22-6 职位 列表 页 面 效 果 


在 “个 人 中 心 ”页 面 中 单 击 简 历 编辑 ， 进 入 “简历 编辑 ”页 面 ， 把 婚姻 状况 改 成 “已 婚 ”， 
页 面 效 果 如 图 22-8 和 图 22-9 所 示 。 单 击 “ 保 存 ” 按 钮 ， 页 面 将 返回 到 “个 人 中 心 ”页 面 。 


必 opera Mo — 口 x @ opera Mobi， 一 口 法 @ opera MobiL， 一 口 x 
< 位 

上 基本 信息 ( 必 填 ) 上 基本 信息 ( 必 填 ) 
java je 

姓 名 姓 名 采 欢 双 
java 软 件 工程 师 
ar 有 有 公司 © 性 别 : 六 性 别 : 广 
于 :000-10000 元 /月 
FI 上 出 生日 期 一 出 生日 期 pp 

婚姻 状 况 : = 婚姻 状况 : 。 已 婚 

民 族 民 族 

身 高 保 音 

和博 口 夯 - 

1G Opti 480x80 ppt 21¢ [Eh [50% ~ LG opti 504x80c ppt 216 [Ds [50% | tS Opti 504x80C Ppt: 216 [Ga] [50% | 
图 22-7 简历 编辑 效果 图 22-8 简历 编辑 效果 图 22-9 简历 编辑 完成 效果 


在 “个 人 中 心 ” 页 面 中 单 击 投递 记录 ， 进 入 “投递 记录 ”页 面 ， 效 果 如 图 22-10 所 示 。 单 
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击 “ 投 递 记录 ”中 的 列表 项 目 时 ， 将 进入 “职位 详情 ”页 面 。 
在 “个 人 中 心 ” 页 面 中 单 击 职位 收藏 ， 进 入 “职位 收藏 ”页 面 ， 效 果 如 图 22-11 所 示 。 单 
击 “ 职 位 收藏 ”中 的 列表 项 目 时 ， 将 进入 “职位 详情 ”页 面 ， 效 果 如 图 22-12 所 示 。 
在 “职位 列表 ”页 面 中 单 击 “ 职 位 列表 ”中 的 列表 项 目 时 ， 将 进入 “职位 详情 ”页 面 。 
在 “职位 详情 ”页 面 中 单 击 “ 投 递 简历 ”按钮 ， 进 入 “职位 列表 ”页 面 。 


@ operaMobi. 一 口 x 必 Opera Mobi.. 一 口 x 
《 天 四 职位 幸 傅 
Ga [mm | 
< 
web 和 前 端 开发 工程 师 。。 6000 元 /月 ed 上 职位 名 称 
pe Ps © web 前 滴 开 发 工程 师 。 。 6000 元 /月 
会 开 避风 公司 +HsH © 地 区 ; 北京 -朝阳 区 
二 RE 天 
web 前 册 开 发 工程 师 aooo 元 /月 时 间 ; 2018-7-20 
RN © web 昔 请 开发 工程 师 。 。 8000 元 /月 机 资 ; 6000-8000 元 /月 
| Bs 2 干 音 网 结 隐 公司 4 有 © 
| 北京 4 有 ,ocx 网 络 开发 有 限 公司 
web 前 端 开发 工程 师 。。 8000 元 /月 一 一 
oe ti © Pr 
北京 区 5 
公司 规 须 :wom 
web 前 负 开 发 工程 师 。 。 so00 元 /月 发 展 方向 :xooo 
的 条 由 公 司 本 © 
北京 站 9 区 120 失地 
+. A 和 > ba 已 一 - 
6 opti 504x80C Ppl: 216 [G3] |50% ~ LG Optit 504x80C ppt 216 [G3] [50% LG Opti 504x80C Ppl: 216 [Gs [50% ~ 


图 22-10 “投递 记录 ”页 面 效 果 ”图 22-11 “职位 收藏 ”页 面 效果 ”图 22-12 “职位 详情 ”页 面 效 果 


22.2 项 目 设计 


本 项 目 是 基于 jQuery Mobile 框架 来 制作 的 ， 首 先 引 入 jQuery Mobile 框架 的 文件 ， 然 后 引 
入 jQuery 框架 的 文件 及 style.css 文件 ， 具 体 如 下 面 的 代码 所 示 。 


<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.css"> 
<!--= 自 定义 的 主题 -=-> 

<link rel="stylesheet" href="css/style.css"> 

<script src="js/jquery.js"></script> 

<script src="js/jquery.mobile-1.4.5.js"></script> 


本 项 目 中 的 每 个 页 面 都 必须 引入 上 面 的 文件 ， 在 后 面 的 介绍 中 将 不 再 效 述 。 
其 中 引入 的 style.css 文件 是 自 定义 的 主题 ， 在 本 项 目 中 主要 用 于 头 部 工具 栏 (header) ， 
具体 代码 如 下 所 示 。 


.ui-bar-xt{ 
background:#00B38A; 
color: #fff; 
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22.2.1 设计 登录 和 注册 页 面 

登录 和 注册 页 面 是 一 个 网 站 中 必 不 可 少 的， 本 节 我 们 使 用 jQuery Mobile 框架 的 内 容 来 制作 。 

1. 登录 页 面 

index.html 是 登录 页 面 。 

在 头 部 栏 中 添加 主题 “x”。 在 内 容 区 域 中 ， 首 先是 一 个 <form> 表 单 ， 用 于 用 户 输入 登录 
舍 息 ， 接 下 来 使 用 了 两 列 网 格 布局 ， 左 边 是 对 于 忘记 密码 的 用 户 提供 帮助 ， 右 边 可 以 选择 是 否 
勾 选 , 勾 选 下 次 将 自动 登录 。 再 往 下 是 “登录 ”按钮 和 进入 “免费 注册 ”页 面 的 按钮 。 注 意 jQuery 
Mobile 框架 中 ， 超 链接 <a> 的 href 属性 指向 其 他 文件 时 ， 需 要 添加 “data-ajax=false” 属 性 类 别 。 

具体 请 参考 下 面 的 代码 。 


<body> 
<div data-role="page"> 
<!--data-position="fixed" 属 性 类 别 用 于 固定 头 部 和 尾部 的 位 置 ，data-theme 设 置 自 
定义 的 主题 --> 
<div data-role="header" data-position="fixed" data-theme="x"> 
<h1> 登 录 </h1> 
</div> 
<div data-role="content"> 
<!-- 添 加 姓名 和 密码 输入 框 --> 
<form> 
<label for="name"> 姓 名 : </label> 
<input type="text" name="name" id="name" placeholder=" 请 输入 用 户 
名 称 "/> 
<label] for="password"> 密 码 : </label> 
<input type="password" name="password" id="password" 
placeholder=" 请 输入 密码 "/> 
</form><br> 
<!-- 使 用 jquery mobile 网 格 系统 中 的 2 列 布局 --> 
<div class="ui-grid-a" style="text-align: center;"> 
<div class="ui-block-a"> 
<a href="#" style="font-size: 14px; "> 忘记 密码 ?</a> 
</div> 
<div class="ui-block-b"> 
<input type="checkbox" name="checkbox" id="checkbox"/> 
<label for="checkbox" style="border: 0px;font-size: 
14px;margin:-15px;"> 下 次 自动 登录 </label> 
</div> 
</div><br> 
<a href="personal.html" data-ajax="false" data-role="button" 
style="background:#00B38A; color:white;"> 登 录 </a> 
<poatyle= tert= Aalidn: Contor">= < 还 没有 账号 
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style="color:#71BC44; "> 免费 注册 </a> 
</div> 
</div> 
</body> 


2. 注册 页 面 

login html 是 注册 页 面 。 

在 头 部 栏 中 ， 首 先 添加 自 定义 主题 “x”， 然 后 添加 一 个 返回 的 按钮 ， 添 加 
onClick="javascript:history.back(-1):" 属 性 类 别 ， 用 于 返回 上 一 个 页 面 。 在 内 容 区 域 中 ， 先 是 一 
个 <form> 表 单 用 于 填写 注册 信息 ， 比 登录 页 面 多 了 一 个 邮箱 信息 ， 紧 接着 是 一 个 复 选 框 ， 只 有 
当 用 户 勾 选 了 以 后 才 可 以 注册 ,最 后 是 免费 注册 按钮 ， 并 添加 了 相应 的 CSS 样式 ,来 使 整个 页 
面 更 协调 。 

有 具体 请 参考 下 面 的 代码 。 


<body> 
<div data-role="page"> 
<div data-role="header" data-position="fixed" data-theme="x"> 
<a href="javascript :;" onClick="javascript :history.back(-1);" 
<a href="javascript :;" onClick="javascript :history.back(-1);" 
data-icon="carat-1" style="background:#00B38A;color:white;border: 0;"> 返 回 
</a> 
<h1> 注 册 </h1> 
</div> 
<div data-role="content"> 
<form> 
<label for="name"> 姓 名 : </label> 
<input type="text" name="name" id="name" placeholder=" 请 输入 用 户 
名 称 "/> 
<label for="password"> 密 码 : </label> 
<input type="password" name="password" id="password" 
placeholder=" 请 输入 密码 "/> 
<label for="email"> 邮 箱 : </label> 
<input type="email" name="email" id="email" placeholder=" 请 输入 
邮箱 "/> 
</form> 
<input type="checkbox" name="checkbox" id="checkbox"/> 
<label for="checkbox" style="border: 0px;font-size: 14px; "> 同意 <a> 
《我 们 的 协议 》</a></label> 
<a href="index.html" data-ajax="false" data-role="button" 
style="background:#00B38A; color :white; "> 免费 注册 </a> 
</div> 
</div> 
</body> 
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22.2.2 ”设计 个 人 中 心 页 面 

personal.html 是 个 人 中 心 页 面 。 

在 头 部 栏 中 ， 先 是 添加 自 定义 主题 “x”， 然 后 添加 一 个 返回 的 按钮 ， 用 于 返回 上 一 个 页 
面 ， 接 着 添加 一 个 “切换 账号 ”按钮 ， 用 于 用 户 退出 登录 或 重新 注册 登录 。 

在 内 容 区 域 中 ， 首 先 设置 用 户 信息 展示 的 区 域 ， 然 后 设置 用 户 照片 的 区 域 ， 用 户 可 以 选择 
上 传 ， 照 片 下 面 是 登录 用 户 的 姓名 ， 再 往 下 是 该 用 户 最 后 登录 的 信息 。 在 用 户 信息 展示 区 域 下 
面 紧 接着 是 一 个 列表 ， 登 录 后 可 以 进行 一 系列 的 操作 。 

在 底部 栏 中 添加 了 一 个 导航 条 , 这 里 我 们 主要 用 来 进行 页 面 之 间 的 跳 转 和 展示 该 网 站 APP 
的 一 些 信息 。 

具体 请 参考 下 面 的 代码 。 


<style> 
CoL Ti at 
background:#00B38A!important; 
color: white!important; 
]; 
</style> 
<body> 
<div data-role="page"> 
<div data-role="header" data-position="fixed" data-theme="x"> 
<a href="javascript :;" onClick="javascript :history.back(-1);" 
data-icon="carat-]" style="background:#00B38A;color:white;border: 0;"> 返 回 
</a> 
<h1> 个 人 中 心 </h1> 
<a href="index.html" data-ajax="false" 
style="background:#00B38A; color :white; "> 切换 账号 </a> 
</div> 
<div data-role="content"> 
<div style="background-image: url('images/bj.png');text-align: 
center;"> 
<br><div><img src="images/tx.png" width="80px"/></div> 
<div style="margin: 5px "> 林 欢 欢 </div> 
<div style="font-size: 0.7em;color: #999;"> 
最 后 登录 时 间 : 2018.10.30 最 后 更 新 时 间 : 2018.10.29 
</div> 
</div> 


<ul data-role="listview"> 
<1i> 
<a href="yulan.html" data-ajax="false"> 
<img src="images/yl.png" class="ui-li-icon"> 
简历 预览 


</a> 
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</1i> 
Ti 
<a href="jlbj.html" data-ajax="false"> 
<img src="images/bjl.png" class="ui-li-icon"> 


简历 编辑 
</a> 
= 
< 


<a href="tdjl.html" data-ajax="false"> 
<img src="images/td.png" class="ui-li-icon"> 
投递 记录 
<!-- 设 置 气泡 数字 --> 
<span class="ui-li-count">4</span> 
</a> 
他 
Ki 
<a href="zwsc.html" data-ajax="false"> 
<img src="images/sc.png" class="ui-li-icon"> 


职位 收藏 
<span class="ui-li-count">2</span> 
</a> 
< 
</ul> 
</div> 


<div data-role="footer" data-position="fixed"> 
<!--data-role="navbar" 用 于 添加 导航 --> 
<div data-role="navbar" data-theme="b"> 
<ul class="col"> 


<li><a href="zwlb.html" data-ajax="false"> 主 页 </a></1i> 


<1i><a href="#"> 关 于 </a></1i> 
<1i><a href="#"> 联 系 </a></1i> 


<li><a href="personal.html" data-ajax="false"> 我 </a></1i> 


</ul> 
</div> 
</div> 
</div> 
</body> 


22.2.3 设计 简历 预览 页 面 


yulan.html 是 简历 预览 页 面 。 
在 头 部 栏 中 ， 先 是 添加 自 定义 主题 “x”， 然 后 添加 一 个 返回 的 按钮 ， 用 于 返回 


面 。 
在 内 容 区 域 中 ， 我 们 使 用 一 个 表格 来 设计 布局 ， 左 边 是 问题 ， 右 边 是 答案 。 


在 底部 栏 中 ， 先 是 添加 自 定义 主题 “x”， 然 后 添加 一 个 “投递 简历 ”按钮 并 设置 相关 的 


样式 。 
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具体 请 参考 下 面 的 代码 。 


<body> 
<div data-role="page"> 
<div data-role="header" data-position="fixed" data-theme="x"> 
<a href="javascript :;" onClick="javascript :history.back(-1);" 
data-icon="carat-1" style="background:#00B38A;color:white;border: 0;"> 返 回 


</a> 


<h1> 简 历 预览 </h1> 
</div> 
<div data-role="content"> 
<h3 style="border-bottom: 2px solid #999; padding: 8px;"> 
<span style="border-left: 8px solid lawngreen;padding-left: 
10px; "> 基本 信息 </ span> 
</h3> 
<!-- 这 里 我 们 使 用 表格 来 进行 页 面 布局 --> 
<table> 
<tr><td> 姓 <i style="width: 2em;display: inline-block;"></i> 名 : 
</td><tqd> 林 欢 欢 </td></tr> 
<tr><td> 性 <i style="width: 2em;display: inline-block;"></i> 别 : 
</td><td> 女 </td></tr> 
<tr><td> 出 生日 期 :</td><td>1995 年 11 月 8 日 </td></tr> 
<tr><td> 婚 姻 状况 : </td><td> 未 婚 </td></tr> 
<tr><td> 民 <i style="width: 2em;display: inline-block;"></i> 族 : 
</td><td> 汉 </td></tr> 
<tr><tqd> 身 <i style="width: 2em;display: inline-block;"></i> 高 : 
</td><td>172cm</td></tr> 
<tr><tqd> 毕 业 院 校 </td><tqd> 北 京 清华 大 学 </td></tr> 
<tr><td> 专 <i style="width: 2em;display: inline-block;"></i> 业 
</td><td> 土 木工 程 </td></tr> 
<tr><td> 最 高 学 历 : </td><td> 本 科 </td></tr> 
<tr><td> 手 <i style="width: 2em;display: inline-block;"></i> 机 : 
</td><td>12344445555</td></tr> 
<tr><td> 现 <i style="width: 2em;display: inline-block;"></i> 住 : 
</tqd><td> 北 京 海淀 区 xxxx</td></tr> 
<tr><td> 籍 <i style="width: 2em;display: inline-block;"></i> 贯 
</td><td> 北 京 朝阳 区 xxxx</td></tr> 
</table> 
</div> 
<div data-role="footer" data-position="fixed" data-theme="x"> 
<a href="zwlb.html" data-ajax="false" type="button" style="width: 
100%;height: 100%;background:#00B38A;color: white;border: 0;"> 投 递 简历 </a> 
</div> 
</div> 
</body> 
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22.2.4 设计 简历 编辑 页 面 


jlbj.html 是 简历 编辑 页 面 。 
在 头 部 栏 中 ， 先 是 添加 自 定义 主题 “x”， 然 后 添加 一 个 返回 的 按钮 ， 用 于 返回 上 一 个 页 


面 。 


在 内 容 区 域 中 ， 使 用 一 个 表格 来 设计 布局 ， 左 边 是 问题 ， 右 边 是 <input> 文 本 框 ， 用 户 可 以 
修改 相应 的 信息 。 

在 底部 栏 中 ， 先 是 添加 自 定 义 主题 “x”， 然 后 添加 一 个 “保存 ”按钮 并 设置 相关 的 样式 。 

具体 请 参考 下 面 的 代码 。 


<body> 
<div data-role="page"> 
<div data-role="header" data-position="fixed" data-theme="x"> 
<a href="javascript :;" onClick="javascript :history.back(-1);" 
data-icon="carat-1" style="background:#00B38A;color:white;border: 0;"> 返 回 
</a> 
<h1> 简 历 编辑 </h1> 
</div> 
<div data-role="content"> 
<h3 style="border-bottom: 2px solid #999; padding: 8px;"> 
<span style="border-left: 8px solid lawngreen;padding-left: 
10px; "> 基本 信息 ( 必 填 ) </span> 
</h3> 
<!-- 这 里 我 们 使 用 表格 来 进行 页 面 布局 --> 
<table> 
<!-- 为 了 使 页 面 更 美观 ， 添 加 了 <i> 标 签 ， 设 置 它 的 宽度 为 两 个 字符 --> 
<tr><td> 姓 <i style="width: 2em;display: inline-block;"></i> 名 : 
</td><td><input type="text" placeholder=" 林 欢 欢 "></td></tr> 
<tr><td> 性 <i style="width: 2em;display: inline-block;"></i> 别 : 
</td><td><input type="text" placeholder=" 女 "></td></tr> 
<tr><td> 出 生日 期 : </td><td><input type="text" placeholder="1995 
年 11 月 8 日 "></td></tr> 
<tr><td> 婚 姻 状况 : </td><td><input type="text" placeholder=" 未 婚 
"></tad></tr> 
<tr><td> 民 <i style="width: 2em;display: inline-block;"></i> 族 : 
</td><td><input type="text" placeholder=" 汉 "></td></tr> 
<tr><td> 身 <i style="width: 2em;display: inline-block;"></i> 高 : 
</td><td><input type="text" placeholder="172cm"></td></tr> 
<tr><td> 毕 业 院 校 </td><td><input type="text" placeholder=" 北 京 清华 
De Re EA 
<tr><td> 专 <i style="width: 2em;display: inline-block;"></i> 业 : 
</td><td><input type="text" placeholder=" 土 木工 程 "></td></tr> 
<tr><td> 最 高 学 历 : </td><td><input type="text" placeholder=" 本 科 
"></td></tr> 
<tr><td> 手 <i style="width: 2em;display: inline-block;"></i> 机 : 
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</td><td><input type="text" placeholder="12344445555"></td></tr> 
<tr><td> 现 <i style="width: 2em;display: inline-block;"></i> 住 : 
</td><td><input type="text" placeholder=" 北 京 海淀 区 xxxx"></td></tr> 
<tr><td> 籍 <i style="width: 2em;display: inline-block;"></i> 贯 : 
</td><td><input type="text" placeholder=" 北 京 朝阳 区 xxxx"></td></tr> 
</table> 
</div> 
<div data-role="footer" data-position="fixed" data-theme="x"> 
<a href="personal.html" data-ajax="false" type="button" 
style="width: 100%;height: 100%;background:#00B38A;color: white;border: 0;"> 
保存 </a> 
</div> 
</div> 
</body> 


22.2.5 ”设计 投递 记录 和 职位 收藏 页 面 
投递 记录 和 职位 收藏 页 面 设计 布局 是 一 样 的 。 
1. 投递 记录 页 面 
tdjl.html 是 投递 记录 页 面 。 
在 头 部 栏 中 ， 先 是 添加 自 定义 主题 “x”， 然 后 添加 一 个 返回 的 按钮 ， 用 于 返回 上 一 个 页 
面 。 
在 内 容 区 域 中 ， 我 们 使 用 一 个 列表 来 设计 ， 在 每 一 个 列表 项 中 添加 了 两 个 <div> 并 设置 浮 
动 样式 ， 分 别 在 两 个 <div> 中 填写 相应 的 信息 。 
具体 请 参考 下 面 的 代码 。 
<style> 
.left{float: left;} 
-rightt{rfloat:. right 
</style> 
<body> 
<div data-role="page"> 
<div data-role="header" data-position="fixed" data-theme="x"> 
<a href="javascript :;" onClick="javascript :history.back(-1);" 


data-icon="carat-1" style="background:#00B38A;color:white;border: 0;"> 返 回 
</a> 


<h1> 投 递 记录 </h1> 
</div> 
<div data-role="content"> 

<ul data-role="listview"> 

<1i> 
<a href="zwxq.html" data-ajax="false"> 
<div class="left"> 
<h3>Web 前 端 开发 工程 师 </h3> 
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<p> 联 合 开 发 有 限 公 司 </p> 
<p> 北 京 -朝阳 区 </p> 
</div> 
<div class="right"> 
<h3>6000 元 /月 </h3> 
<p> 本 科 / 专 科 </p> 
<p> 今 天 </p> 
</div> 
</a> 
</1i> 
< 


<a href="zwxq.html" data-ajax="false"> 
<div class="left"> 
<h3>Web 前 端 开发 工程 师 </h3> 
<p> 干 谷 网 络 有 限 公司 </p> 
<p> 北 京 - 朝 阳 区 </p> 
</div> 
<div class="right"> 
<h3>8000 元 /月 </h3> 
<p> 本 科 </p> 
<p> 今 天 </p> 
</div> 
</a> 
</1i> 
<1i> 
<a href="zwxq.html" data-ajax="false"> 
<div class="left"> 
<h3>Web 前 端 开发 工程 师 </h3> 
<p> 宏 伟 网 络 有 限 公 司 </p> 
<p> 北 京 -海淀 区 </p> 
</div> 
<div class="right"> 
<h3>8000 元 /月 </h3> 
<p> 本 科 </p> 
<p>8-25</p> 
</div> 
</a> 
</1i> 
<I1> 
<a href="zwxq.html" data-ajax="false"> 
<div class="left"> 
<h3>Web 前 端 开发 工程 师 </h3> 
<p> 飞 驰 网 络 有 限 公司 </p> 
<p> 北 京 -昌平 区 </p> 
</div> 
<div class="right"> 
<h3>8000 元 /月 </h3> 
<p> 本 科 </p> 
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<p>8-20</p> 
</div> 
</a> 
< 
</ul> 
</div> 

</div> 

</body> 


2. 职位 收藏 页 面 

zwsc.html 是 职位 收藏 页 面 。 

职位 收藏 页 面 与 投递 记录 页 面 基本 一 致 ， 这 里 就 再 不 资 述 了 。 
具体 请 参考 下 面 的 代码 。 


<style> 
-Lofttlifloat: lofts} 
-rightifloats: rightst 
</style> 
<body> 
<div data-role="page"> 
<div data-role="header" data-position="fixed" data-theme="x"> 
<a href="javascript :;" onClick="javascript :history.back(-1);" 
data-icon="carat-]" style="background:#00B38A;color:white;border: 0;"> 返 回 
</a> 
<h1> 职 位 收藏 </h1> 
</div> 
<div data-role="content"> 
<ul data-role="]listview"> 
人 
<a href="zwxq.html" data-ajax="false"> 
<div class="left"> 
<h3>Web 前 端 开发 工程 师 </h3> 
<p> 联 合 开发 有 限 公司 </p> 
<p> 北 京 - 朝 阳 区 </p> 
</div> 
<div class="right"> 
<h3>6000 元 /月 </h3> 
<p> 本 科 / 专 科 </p> 
<p> 今 天 </p> 
</div> 
</a> 
< 
< 
<a href="zwxq.html" data-ajax="false"> 
<div class="left"> 
<h3>Web 前 端 开发 工程 师 </h3> 
<P> 干 谷 网 络 有 限 公司 </p> 
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<Pp> 北 京 -朝阳 区 </P> 


</div> 
<div class="right"> 
<h3>8000 元 /月 </h3> 
<p> 本 科 </p> 
<p> 今 天 </p> 
</div> 
</a> 
</11i> 
</ul> 
</div> 
</div> 
</body> 


22.2.6 设计 职位 列表 页 面 


zwlb.html 是 职位 列表 页 面 。 

在 头 部 栏 中 ， 先 是 添加 自 定义 主题 “x”， 然 后 添加 一 个 返回 的 按钮 ， 用 于 返回 上 一 个 页 
面 。 

在 内 容 区 域 中 ， 首 先 使 用 一 个 表格 来 布局 ， 左 边 是 <input> 搜 索 框 ， 右 边 是 搜索 按钮 。 

接 下 来 是 一 个 列表 ， 用 来 展示 职位 信息 。 

在 底部 栏 中 添加 了 一 个 导航 条 , 这 里 我 们 主要 用 来 进行 页 面 之 间 的 跳 转 和 展示 该 网 站 APP 
的 一 些 信息 。 


具体 请 参考 下 面 的 代码 。 


<style> 
i 
background:#00B38A!important; 
color: white!important; 
i 
</style> 
<body> 
<div data-role="page"> 
<div data-role="header" data-position="fixed" data-theme="x"> 
<a href="javascript :;" onClick="javascript :history.back(-1);" 
data-icon="carat-l" style="background:#00B38A;color:white;border: 0;"> 返 回 
</a> 
<h1> 职 位 列表 </h1> 
</div> 
<div data-role="content"> 
<!-- 这 里 我 们 使 用 了 搜索 字段 , 在 输入 框 中 输入 想 要 搜索 的 职位 , 可 以 筛选 出 对 应 的 职位 ， 
要 想 实 现 效果 需要 以 下 几 个 步骤 --> 
<!--1 .给 要 过 滤 的 元 素 添加 data-filter="true" 属 性 --> 
<!--2 .创建 <input> 元 素 并 指定 jd， 在 该 元 素 上 加 上 data-type="search" 属 性 ， 这 
样 就 能 创建 基本 的 搜索 字段 。 将 <input> 元 素 放置 于 一 个 表单 中 ， 表 单 <form> 元 素 使 用 
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"ui-filterable" 类 ， 该 类 会 调整 搜索 字段 与 过 滤 元 素 的 外 边 距 --> 
<!--3 .接着 为 过 滤 的 元 素 添 加 data-input 属 性 ， 属 性 值 是 <input> 元 素 的 1d--> 


<form class="ui-filterable"> 


<input id="myFilter" data-type="search" placeholder=" 搜 索 "> 
</form> 


<ul data-role="listview" data-filter="true" data-input="#myFilter" 
data-autodividers="true" data-inset="true"> 
< 


<a href="zwxq.html" data-ajax="false"> 
<h3>Web 前 端 开发 工程 师 </h3> 
<p>xxxx 开 发 有 限 公 司 </p> 
<p> 薪 资 ， 6000-8000 元 /月 </p> 
<p> 北 京 - 朝 阳 区 | 工作 1~2 年 </p> 
</a> 
</1i> 
<1i> 


<a href="zwxq.html" data-ajax="false"> 
<h3>java 软 件 工程 师 </h3> 
<p>xxxx 开 发 有 限 公 司 </p> 
<p> 薪 资 ，8000-10000 元 /月 </p> 
<p> 北 京 - 昌 平 区 | 工作 2 年 以 上 </p> 
</a> 
< 
<1i> 


<a href="zwxq.html" data-ajax="false"> 
<h3> 软 件 测试 工程 师 </h3> 
<p>xxxx 开 发 有 限 公司 </p> 
<p> 薪 资 ，4000-6000 元 /月 </p> 
<p> 北 京 - 朝 阳 区 | 工作 1~2 年 </p> 
</a> 
</Li> 
i> 


<a href="zwxq.html" data-ajax="false"> 
<h3>Web 前 端 开发 工程 师 </h3> 
<p>xxxx 开 发 有 限 公 司 </p> 
<p> 薪 资 : 10000-15000 元 /月 </p> 
<p> 北 京 - 朝 阳 区 | 工作 3 年 以 上 </p> 

</a> 

</li> 

</ul> 

</div> 


<div data-role="footer" data-position="fixed" > 
<div data-role="navbar" data-theme="b"> 
<ul class="col"> 


<li><a href="zwlb.html" data-ajax="false"> 主 页 </a></1i> 
<1i><a href="#"> 关 于 </a></1i> 
<1i><a href="#"> 联 系 </a></1i> 


<li><a href="personal.html" data-ajax="false"> 我 </a></1i> 
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</ul> 
</div> 
</div> 
</div> 
</body> 


22.2.7 ”设计 职位 详情 页 面 


Zzwxq.html 是 职位 详情 页 面 。 
在 头 部 栏 中 ， 先 是 添加 自 定义 主题 “x”， 然 后 添加 一 个 返回 的 按钮 ， 用 于 返回 上 一 个 页 
面 。 具 体 请 参考 下 面 的 代码 。 


<body> 
<div data-role="page"> 
<div data-role="header" data-position="fixed" data-theme="x"> 
<a href="javascript :;" onClick="javascript :history.back(-1);" 
data-icon="carat-1" style="background:#00B38A;color:white;border: 0;"> 返 回 
</a> 
<h1> 职 位 详情 </h1> 
</div> 
<div data-role="content"> 
<div> 
<h2 style="border-bottom: 2px solid #999; padding: 8px;"> 
<a style="border-left: 8px solid lawngreen;padding-left: 
10px; "> 职位 名 称 </a> 
</h2> 
<p> 地 区 : <span> 北 京 -朝阳 区 </span></P> 
<p> 时 间 : 2018-7-20</p> 
<p> 薪 资 : 6000-8000 元 /月 </p> 
</div> 
<h3 style="border-bottom: 2px solid #999; padding: 8px;"> 
<a style="border-left: 8px solid lawngreen;padding-left: 
10px; ">xxxx 网 络 开发 有 限 公司 </a> 
</h3> 
<div> 
<p> 公 司 简介 : xxxx</p> 
<p> 公 司 规模 : xxxx</p> 
<p> 发 展 方向 : xxxx</p> 
</div> 
</div> 
<div data-role="footer" data-position="fixed" data-theme="x"> 
<a href="zwlb.html" data-ajax="false" type="button" style="width: 
100%;height: 100%;background:#00B38A;color: white;border: 07"> 投 递 简历 </a> 
</div> 
</div> 
</body> 
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22.3 项目 打包 成 APP 


项 目 打包 使 用 HBuilder 工具 。 HBuilder 默认 是 在 云端 打包 的 , 也 就 是 将 代码 提交 上 去 进行 
打包 ， 然 后 下 载 打 好 的 包 。 优 点 是 不 管 机 器 配置 的 高 低 ， 只 要 网 速 快 就 可 以 很 快 打 好 包 ， 当 然 
也 可 以 进行 本 地 打包 ， 那 样 就 需要 Android 环境 和 IOS 环境 ， 不 做 推荐 。 

首先 打开 HBuilder 工具 ， 执 行 “ 文 件 ”>>“ 新 建 ”>>“ 移 动 APP” 命 令 ， 弹 出 新 建 项 目 
界面 ， 输 入 应 用 名 称 ， 位 置 可 以 根据 需要 自己 选择 , “选择 模板 ”建议 选择 空 模板 ， 如 图 22-13 


所 示 。 


WD sahApp 名 天 
创建 移动 App 
请 约 入 应 用 名 称 并 且 选 择 一 个 模板 
应 用 信息 
应 用 名 称 : | 求职 招 驯 
位 置 : [Gi\project 济 昂 … 
远近 模板 
三 模板 全 模板 只 包 合 index html 一 个 文件 和 栓 关 目录 . 模板 
口 mi 项目 已 包含 mui 的 js。css、 闻 体 资源 的 项 目 模板 模板 
口 mu 得 录 模 板 和 登录 和 设置 的 MUI 模 项 目 模板 
口 遍地 选项 卡 模 板 。 原生 迁 项 卡 示例 ， 合 tab 中 部 人 起 半 国 示例 模板 
口 Helo H5+ HTML5plus 规 范 的 演示 ， 包 括 和 像 头等 各 种 度 屋 能 力 的 调 用 示例 
口 Hello mui mui 前 议 框 兹 各 种 UI 控件 (如 按钮 ) 的 展示 示例 
语法 
Javascript 版 本 : ECMAScript 5.1 ~ 
HTML5+ 旺 府 层 runtime，mui 星 前 铸 框 染 ， 他 们 的 关系 类 似 phonegap 和 和 jqmobile。 
点 二 查看 ， 移动 APp 开 发 入 门 才 保 
更 多 开源 示例 点 二 这 里 : https//github.com/dcloudio/casecode 
加 ws 
图 22-13 新 建 项 目 


新 建 完成 后 ， 在 “项 目 管理 器 ”会 显示 新 建 的 项 目 目录 ， 如 图 22-14 所 示 。 其 中 css 文件 
夹 、img 文件 夹 、js 文件 夹 和 index.html 文件 都 可 以 删除 、 蔡 换 或 更 改 。unpackage 文件 夹 是 放 
置 APP 图 标 和 启动 界面 的 图 片 ; manifestjson 文件 是 移动 APP 的 配置 文件 , 用 于 指定 应 用 的 显 


示 名 称 、 图 标 、 应 用 入 口 文 件 地 址 及 需要 使 用 的 设备 权限 等 信息 ,用 


化 界面 视图 或 源 代码 视图 来 配置 移动 APP 的 信息 。 
如 果 删 除了 css 文件 夹 、img 文件 夹 、js 文件 夹 和 index.html 文件 ， 就 把 自己 的 项 目 文件 
复制 到 新 建 的 项 目 中 ， 注 意 html 文件 中 的 引用 路 径 需 要 保持 正确 ， 如 图 22-15 所 示 。 


户 可 通过 HBuilder 的 可 视 
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加 manicajson ~ Houilder 
文件 月 。 舌 纺 (E] 揪 和 (1) 转 义 (0) 运 摊 (S) 


加 未 职 招聘 /manifestjson - HB 


文件 (” 编 轧 (E) 插入 () 转 义 (C 回忆 司 
站。 同 人 B"e- 
a | i 
- 下 > 加 了 SR 
e vB se 
项 目 管理 器 名 = 日 2 
@ jquerymebille-1.45.css 
» Be 
》 同 于 See 
v 园 未 RB 莹 jqueryis 
scss 国 jquery mebile-1.45je 
区 img 本 mpeckage 
sjs 
而 unpackage 
加 index.html eh 
起 | manifestjson 回 ylanhtml 
BB zwbhtml 
回 =wscheml 
回 zwxq.html 
图 22-14 新 建 项 目的 目录 图 22-15 复制 后 的 项 目 目录 


文件 复制 完成 后 ， 双 击 打开 manifestjson 文件 来 配置 APP， 如 图 22-16 所 示 。 这 里 全 部 保 
持 默 认 就 可 以 了 。 


Wy /manifestjson - HBuilder - 0 x 
文件 (六 入 (E) 插入 () 转 XIO) 运 后 (S) 路 总 (G) 覃 扰 ( 运行 R) 发 行 (8) 工具 视 查 M 吉 动 (H) 
+- = 四 + 搜索 (双击 Ctl) a- 
L] + jh 习 轩 DB» 全" 
EE El = |” = OD marifestjson 3| 
> 大 冰 REW 和 用 信息 。 aaaI 下 可 
We | 给 入 过 请 吕 文本 
vs 注 : manifest 里 大 部 分 村 在 丰 让 运行 时 旺 不 生 多 的 生效 的 部 分 |/ 营 色 李 体 表示 其 他 部 分 村 要 通过 App 生 但 才 可 看 到 xX 昌 
》 images v0 « 
站 基本 信息 vY 0 en 
回 slecss 应 用 名称 | 求 扫 时 
》 喇 image 四 
人 appit [MSEE901FE EE id: 
加 jquery.mobile-1.4.5js CS 
而 unpackage 技术 号 [1.0 Y 国 ver 
加 indexhtml 
加 jinml AD: [indexheml ] [| wd 
回 loginhtml ea 
| vi 
应 用 所: 后 
加 personalhtml 
B him 2 lw 
yulenhimn 口语 才 归 全 惰 元 应 于 全 于 卫生 明 v de 
回 awlb.html 加 二 
从 Da 训 。 
回 mqhtml 应 用 信息 | 加 千 下 和 | 局 动因 片 (splash) 本 时 | 5DK 瑟 时 要 终 权 限 瑟 全 页面 1 用 关系 | 代 而 图 | le a 
4 201990755@qq.com 。 村 我 们 


图 22-16 配置 APP 界面 


接 下 来 ， 在 HBuilder 中 选择 “发 行 ”>>“ 云 打包 - 打 原生 安装 包 ” 命 令 ， 如 图 21-17 所 示 。 
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加 =/marifeetjcon - HBuider 3 
文件 站” 电 雪 EE 考 入 (1 转 义 (D| 下 (9 路 转 (G) 本 所 (运行 RI | 要 到 天 | 工具 m。 入 才 却 (H) 
Pe ss Rc) 
i TT zp TEE) 
ETE EEApp TEEV. 
n | 
本 二 APP 
项 8 | =|” =| 国 "marifestison 吕 RR Be 本 
》 因 开 网站 -@ RD) 
v BEEN 项 目 [REN9] nal 用 到 图 
) ms B 2 
mimage indechend 
> ms jojheml 
} Bh unpackace @ eginhanl TA 
Bl indexhtml Personalhtml 坷 :、css、 图 片 、 字 体 、 竺 一 个 显示 的 子 webvicw 
圳 黄色 多 本 的 文 和 二 流 廊 党 大吉 于 四 - 
EB jbihtml jhenl mn. 
回 loginhtml 加 ylonhn 区 ry 
dt 轨 esfmragesficons pna/acion bl 2198 
EB personalntml zmschenl i 
har Beebem 丽 imegesicors-pngfelort blec.. 2448 
ent 而 cvyimageqicons-png/alerrwht，2438 
局 a 于 cssfimagesficons-pngjarrow-d-.。 1468 
-ies 栈 css/images/icons-png/arrow-d-.. 1678 ~ 
固 zwmqhtml 
所 用 信息 | 要 标 本 生计 动 图 片 kplschj 配 生 |$Dk 配 午 模 人 权限 配置 页 下 引 月 关系 | 代码 杭 图 | 
页 ”App manifesi 可 视 沪 器 
和 201939755g9qq.com 。。 共和 我 们 


图 22-17 云 打包 
弹出 如 图 22-18 所 示 的 页 面 ， 选 中 “Android” 复 选 框 ， 然 后 单 击 “ 打 包 ” 按 钮 进入 打包 界面 。 


sipad 
重用 乎 果 证 蔬 
图 使 用 DCloud 公 用 证 书 〇 使用 自 有 证 蔬 


iOs 开 发 者 证 书 “Google 开 发 者 证 书 


AndroidaS [ddovdH50539131 


证 书 别名 


加 开本 全 部 广告 。 回 Push 广告” 回 是 洋红 包 广 告 。 团 开 圭 广告 


EE 
加 加 入 换 量 联盟 ， 免 费 获 取 更 多 用 户 ， 开 通栏 早 ， 权 重 朴 高 [点 此 讼 畦 | [了 艇 涯 入] 


口 启 肌 s 厌 生 汶 潮 二 大生 深海 本 于 


注 : App 云 镀 打 包 使 得 你 不 雪 要 配置 Xcode 和 Android SDK 匡 于 可 PP 


22-18 打包 


打包 成 功 后 ， 如 图 22-19 所 示 。 单 击 “ 手 动 下 载 ” 按 钮 下 载 到 本 地 ， 下 载 完成 后 就 可 以 安 
装 到 手机 中 运行 了 。 
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器 口 访 
查看 App 打 包 扶 态 
远 择 项 目 。 求职 招聘 曾 。 HEHEF 巧 目录 打开 各 定义 基 座 目录 
版 本 去 丢 包 名 称 申请 对 间 制作 六 态 强 作 


口 10 H531DF489_1108004123.apk ”20181108 00:41:08 。 ”打包 成 功 ， 下 坦 完 成 手动 下 载 


图 22-19 打包 成 功 


在 手机 上 安装 成 功 后 , 打开 APP, 页 面 效果 与 前 面 项 目 效果 展示 基本 一 致 ,效果 如 图 22-20~ 
22-22 所 示 。 


姓名 web 前 端 开 发 工程 师 
i | 
- web 前 端 开发 工程 师 
忘记 密码 ? 下 次 自动 登录 es 
web 前 端 开发 工程 师 
EEC 0 
i 还 没有 账号 -一 
web 前 端 开 发 工程 师 
免费 注册 飞 喇 刚 名 有 限 公司 
图 22-20 ”登录 页 面 效果 图 22-21 个 人 中 心 页 面 效 果 图 22-22 ”投递 记录 页 面 效 果 
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本 章 将 介绍 一 个 网 上 购物 的 网 站 ， 网 站 以 Bootstrap 框架 技术 为 主 ， 利 用 Bootstrap 技术 特 
点 来 实现 响应 式 布局 ， 可 以 在 不 同 分 辩 率 的 设备 上 自 适 应 显示 。 该 网 站 页 面 设计 风格 简洁 、 大 
气 ， 完 美 地 诠释 了 Bootstrap 框架 的 基本 风格 特点 。 


23.1 项 目 概述 
该 网 站 主要 销售 蔬菜 、 水 果 和 干果 等 产品 。 具 体 功能 将 在 下 面 的 小 节 中 介绍 。 


23.1.1 项 目 结构 目录 
本 项 目的 目录 结构 如 图 23-1 所 示 。 


| ”~ 曾 一 扫 而 空 购 物 网 站 
> MM bootstrap-4.1.3 
v Mcss 
品 sbylecss 
> images 
v Mjs 
名 buyjs 
jqueryjs 
品 buy.html 
蝇 indexhtml 


一 showhtml 


图 23-1 目录 结构 
具体 内 容 如 下 。 


(1) Bootstrap-4.1.3 文件 夹 : 这 里 包含 Bootstrap 框架 的 最 新 版 本 。 
(2) css 文件 夹 : 项 目的 CSS 样式 文件 。 

(3) images 文件 夹 : 项 目 使 用 的 图 片 。 

(4) js 文件 夹 : 包含 jQueryjs 和 项 目的 JS 文件 。 

(5) buy.html: 购买 页 面 。 
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(6) index.html: 项 目的 首页 。 
(7) show.html: 更 多 展示 页 面 。 


23.1.2 项目 效 果 展示 
下 面 使 用 下 11.0 浏览 器 来 展示 项 目 效果 。 首 先 打 开 index.html 页 面 ,效果 如 图 23-2 所 示 。 


站 Po Eimersnns 


图 23-2 首页 页 面 效 果 


在 广告 栏 中 ， 单 击 “ 登 录 ” 按 钮 时 会 弹出 模 态 框 ， 如 图 23-3 所 示 ; 单 击 “ 注 册 ” 按 钮 时 
会 弹出 模 态 框 ， 如 图 23-4 所 示 。 


项 目 实 训 3 一 一 开发 购物 网 站 APP ”第 23 章 


图 23-3 ”登录 页 面 


- 0 
羡 cusersAdminisrmonDesaop Wi D ”0 | 加 +p 


主公 和 姓名 
本: 

请 验 入 至 到 
[ 


mR 和 A 


图 23-4 注册 页 面 
在 蔬菜 栏 中 单 击 “ 购 买 ” 按 钮 时 将 跳 转 到 购买 页 面 ， 如 图 23-5 所 示 。 


EB ser Administreton,.. 


图 23-5 ”购买 页 面 
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选择 好 斤 数 ， 单 击 “ 购 买 ”按钮 ， 将 弹出 一 个 模 态 框 ， 模 态 框 中 显示 购买 辣椒 的 总 钱 数 ， 
单 击 “确认 购买 ”按钮 ， 即 可 购买 辣椒 ， 如 图 23-6 所 示 。 


画 


DP 上 | cser Administrato\.. x | 7 @ 


图 23-6 ”购买 效果 


在 首页 中 ， 单 击 蔬菜 栏 中 的 “更 多 ”按钮 时 ， 将 跳 转 到 所 有 蔬菜 的 展示 页 面 ， 如 图 23-7 
所 示 。 在 该 页 面 中 也 可 以 完成 购买 。 


- OO x 
国 CAUsersAdministrat PD ~ © | @ cAUsersAdministra.. x | LY 图 
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图 23-7 蔬菜 展示 效果 
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23.2 首页 设计 


首页 的 设计 很 重要 ， 它 会 直接 影响 网 站 的 受 欢迎 程度 ， 下 面 就 来 具体 介绍 本 网 站 的 设计 思路 。 
在 介绍 之 前 ， 首 先 需要 在 头 部 引入 Bootstrap 框架 的 文件 和 jQuery 文件 ， 如 下 面 的 代码 所 示 。 
<head> 
<title> 蔬 菜 水 果 销 售 </title> 
<meta name="viewport" content="width=device-width, initial-scale=1, 
shrink-to-fit=no"> 
<link rel="stylesheet" href="bootstrap-4.1.3/css/bootstrap.css"> 
<link rel="stylesheet" href="css/style.css"> 
<script src="js/jquery.js"></script> 
<script src="bootstrap-4.1.3/js/bootstrap.bundle.js"></script> 
<script src="bootstrap-4.1.3/js/bootstrap.js"></script> 
</head> 
注意 , Bootstrap 中 的 页 面 内 容 和 栅 格 系统 需要 包 训 在 特定 的 容器 中 。Bootstrap 提供 了 两 个 
类 ， 分 别 为 .container 和 .container-fluid 。.container 类 用 于 固定 宽度 并 支持 响应 式 布局 的 容 
器 ; .container-fluid 类 用 于 占据 全 部 视 口 (viewport) 的 宽度 。 本 项 目 使 用 含有 .container 类 的 容 


器 。 


23.2.1 设计 广告 栏 
广告 栏 采用 了 Bootstrap 的 网 格 系统 ， 页 面 效果 如 图 23-8 所 示 。 
周年 活动 来 就 送 豪 礼 ， 购 买 送 更 多 录 | 注册 | | 


图 23-8 在 大 于 768 像素 宽度 屏幕 上 的 效果 


Bootstrap 网 格 系统 的 布局 是 响应 式 的 ， 页 面 中 的 列 会 根据 屏幕 大 小 自动 重新 排列 。 
Bootstrap 4 网 格 系统 有 以 下 5 个 类 。 


(1) col-: 针对 所 有 设备 。 

(2) col-sm-: 针对 平板 设备 (屏幕 宽度 等 于 或 大 于 576 像素 ) 。 

(3) col-md-: 针对 桌面 显示 器 (屏幕 宽度 等 于 或 大 于 768 像素 ) 。 

(4) col-lg-: 针对 大 桌面 显示 器 (屏幕 宽度 等 于 或 大 于 992 像素 ) 。 
(5) col-xl-: 针对 超大 桌面 显示 器 (屏幕 宽度 等 于 或 大 于 1200 像素 ) 。 


_ 


Bootstrap 网 格 系统 在 不 同 设备 上 的 情况 如 表 23-1 所 示 。 
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表 23-1 ”网 格 系统 在 不 同 设备 上 的 情况 


超 小 设备 桌面 显示 器 >2768 | 大 桌面 显示 “| 超大 桌面 显示 
平板 >576 像素 
<576 像素 像素 器 >992 像素 | 器 >1200 像素 
容器 最 大 宽度 | None(auto) | 540 像素 720 像素 960 像素 1140 像素 
类 前 组 | .col- .Col-sm- .col-md- .col-lg- | .Col-xl- 
列 数量 和 4 
间隙 宽 度 30 像素 〈 一 个 列 的 每 边 分 别 15 像素 ) 


广告 栏 中 有 两 部 分 信息 : 左边 是 广告 信息 ; 右边 是 登录 注册 信息 。 两 部 分 根据 屏幕 的 大 小 ， 
会 占据 不 同 的 空间 。 左边 设置 为 “col-xs-12 col-sm-12 col-md-9 col-lg-9”, 右边 设置 为 “col-xs-12 
col-sm-12 col-md-3 col-lg-3”。 当 屏幕 宽度 大 于 768 像素 时 ， 左 边 将 占据 网 格 的 9 份 ， 右 边 占 
据 3 份 ， 当 屏幕 宽度 小 于 768 像素 时 ， 左 边 和 右边 都 占据 12 份 ， 在 两 行 显示 ， 效 果 如 图 23-9 
所 示 。 

在 右边 部 分 ， 为 登录 注册 定义 了 一 个 模 态 框 ， 用 来 让 读者 进行 注册 或 登录 。 在 模 态 框 中 又 
添加 了 一 个 胶 襄 导航 选项 卡 ， 用 来 切换 登录 和 注册 。 

周年 活动 来 就 送 豪 礼 ， 购 买 送 更 多 


图 23-9 在 小 于 768 像素 宽度 屏幕 上 的 效果 


广告 栏 具体 的 代码 如 下 所 示 。 
CSS 样式 代码 如 下 : 


.hot{margin: 0;background:#C1617A;} 
.btn-group af 

background: #C1617A; 

color: white!important; 

border: lpx solid white; 


有 


HTML 代码 如 下 : 


<div class="row hot"> 
<div class="col xs 12 col sm 12 coOl md 9 col lg 9"> 
<span style="color: white;font-size: 20px;font-family: 微 软 雅 
黑 ; "> 周年 活动 来 就 送 豪 礼 ， 购 买 送 更 多 </span> 
</div> 
<div class="col=xs 12 col=sm-12 col = md=3 co 19 3"> 
<div class="btn-group"> 
<a type="button" class="btn btn-default" data-toggle="modal™" 
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data-target="#myModal"> 登 录 </a> 
<a type="button" class="btn btn-default" data-toggle="modal™" 
data-target="#myModal"> 注 册 </a> 
<!-- 开 始 演示 模 态 框 --> 
<!-- 模 态 框 (Modal) --> 
<div class="modal fade" id="myModal" tabindex="-1" 
role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
<! 一 定义 模 态 对 话 框 层 --> 
<div class="modal-dialog"> 
<div class="modal-content"> 
<div class="modal-header"> 
<h4 class="modal-title" id="myModalLabel"> 
<!-- 胶 过 导航 选项 卡 切换 --> 
<ul class="nav nav-pills" role="tablist"> 
<1i class="nav-item"> 
<a class="nav-link active" 
data-toggle="pill" href="#home"> 登 录 </a> 
</1i> 
<li class="nav-item"> 
<a class="nav-link" 
data-toggle="pill" href="#menul"> 注 册 </a> 
</1i> 
</ul> 
</h4> 
<button type="button" class="close" 
data-dismiss="modal">gtimes;</button> 


</div> 
<div class="modal-body"> 
<!-- 胶 宫 选 项 卡 --> 


<div class="tab-content"> 
<div id= 


home" class="container tab-pane 
active"><br> 
<form role="form"> 
<div class="form-group"> 
<label for="name"> 姓 名 : </label> 
<input type="text" 
class="form-control" id="name" placeholder=" 请 输入 姓名 "> 
<label for="namel"> 密 码 : </label> 
<input type="password" 
class="form-control" id="namel" placeholder=" 请 输入 密码 "> 
</div> 
<a type="button" class="btn 
btn-primary"> 登 录 </a> 
</form> 
</div> 
<div id="menul" class="container tab-pane 
fade"><br> 
<form role="form"> 
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<div class="form-group"> 
<label for="name2"> 姓 名 : </label> 
<input type="text" 
class="form-control" id="name2" placeholder=" 请 输入 姓名 "> 
<label for="name3"> 密 码 : </label> 
<input type="password" 
class="form-control" id="name3" placeholder=" 请 输入 密码 "> 
<label for="name4"> 邮 箱 : </label> 
<input type="email" 
class="form-control" id="name4"” placeholder=" 请 输入 邮箱 "> 
</div> 
<a type="button" class="btn 
btn-primary"> 注 册 </a> 
</form> 
</div> 
</div> 
</div> 
</div> 
</div> 
</div> 
</div> 
</div> 
</div> 


23.2.2 ”设计 导航 栏 


本 项 目 使 用 了 折 生 导 航 栏 ， 效 果 如 图 23-10 和 图 23-11 所 示 。 通 常情 况 下 ， 小 屏幕 上 都 会 
折 芝 导航 栏 ， 通 过 点 击 来 显示 导航 选项 。 


图 23-10 大 屏幕 下 导航 效果 


图 23-11 ”小 屏幕 下 导航 效果 


要 创建 折 又 导航 栏 ， 可 以 在 按钮 上 添加 class="navbar-toggler"、data-toggle="collapse" 与 
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data-target="#thetarget" 类 ， 然 后 在 设置 了 class="collapse navbar-collapse" 类 的 div 上 包 庄 导航 内 
容 (链接 ) ，div 元 素 上 的 id 匹配 按钮 data-target 上 指定 的 id。 
Logo 样式 的 代码 如 下 : 


-bigf 
width: 80px; 
height: 80px; 
font-size: 1.4em; 
border-radius:50% 50%; 
padding: 8px 15px; 
background: white; 
font-family :华文 琥珀 ; 

3 


HTML 的 代码 如 下 : 


<nav class="navbar navbar-expand-md bg-dark navbar-dark nav-css"> 
<div class="big"><a href="index.html"> 一 扫 而 空 </a></div> 
<a class="navbar-brand" href="#"> 
a>. 
<button class="navbar-toggler" type="button" 
data-toggle="collapse" data-target="#collapsibleNavbar"> 
<span class="navbar-toggler-icon"></span> 
</button> 
<div class="collapse navbar-collapse" id="collapsibleNavbar"> 
<ul class="nav navbar-nav nav-pills"> 
<li class="nav-item"><a class="nav-link active" href 
data-toggle="pil1"> 首 页 </a></1i> 
<li class="nav-item"><a class="nav-link" href="#" 
data-toggle="pil1"> 关 于 我 们 </a></1i> 
<li class="nav-item"><a class="nav-link" href="#" 
data-toggle="pill"> 加 盟 指 南 </a></1i> 
<li class="nav-item"><a class="nav-link" href="#" 
data-toggle="pil1"> 加 盟 方案 </a></1i> 
<li class="nav-item"><a class="nav-link" href="#" 
data-toggle="pil1"> 投 资 开 店 </a></1i> 
<li class="nav-item"><a class="nav-link" href="#" 
data-toggle="pil1"> 联 系 电 话 </a></1i> 
和 /> 
</div> 
</nav> 


23.2.3 ”设计 轮 播 
本 项 目 中 的 轮 播 图 效果 如 图 23-12 所 示 。 
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图 23-12 轮 播 效果 


Bootstrap 中 轮 播 是 一 种 灵活 的 响应 式 插件 。 除 此 之 外 ， 内 容 还 可 以 是 图 像 、 内 嵌 框 架 、 视 
频 或 其 他 想 要 放置 的 任何 类 型 内 容 。Bootstrap 中 与 轮 播 相关 的 类 别 属性 如 下 所 示 : 


(1) .carousel: 创建 一 个 轮 播 图 。 

(2) .carousel-indicators: 为 轮 播 图 添加 一 个 指示 符 ， 就 是 轮 播 图 底下 的 一 个 个 小 点 ， 轮 
播 的 过 程 可 以 显示 目前 是 第 几 张 图 。 

(3) .carousel-inner: 添加 要 切换 的 图 片 。 

(4) .carousel-item: 指定 每 个 图 片 的 内 容 。 

(5) .carousel-control-prev: 添加 左 侧 的 按钮 ， 点 击 会 返回 上 一 张 。 

(6) .carousel-control-next: 添加 右 侧 的 按钮 ， 点 击 会 切换 到 下 一 张 。 

(7) .carousel-control-prev-icon: 与 .carousel-control-prev 一 起 使 用 ， 设 置 左 侧 的 按钮 。 

(8) .carousel-control-next-icon: 与 .carousel-control-next 一 起 使 用 ， 设 置 右 侧 的 按钮 。 

(9) .slide: 切换 图 片 的 过 渡 和 动画 效果 ， 如 果 不 需要 这 样 的 效果 ， 就 可 以 删除 这 个 类 。 


下 面 是 本 项 目 轮 播 图 的 具体 代码 。 


<div id="demo" class="carousel slide" data-ride="carousel"> 
<!= 指示 符 一 > 
<ul class="carousel-indicators"> 
<1i data-target="#demo" data-slide-to="0" class="active"></1i> 
<1i data-target="#demo" data-slide-to="1"></1i> 
<1i data-target="#demo" data-slide-to="2"></1i> 
<1i data-target="#demo" data-slide-to="3"></1i> 
</ul> 
<!-- 轮 播 图 片 --> 
<div class="carousel-inner"> 
<div class="carousel-item active"> 
<img src="images/a.png"> 
</div> 
<div class="carousel-item"> 
<img src="images/d.png"> 
</div> 
<div class="carousel-item"> 
<img src="images/c.png"> 
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</div> 


</div> 
<div class="carousel-item"> 
<img src="images/b.png"> 
</div> 
</div> 
<!-- 左右 切换 按钮 --> 
<a class="carousel-control-prev" href="#demo" data-slide="prev"> 
<span class="carousel-control-prev-icon"></span> 
</a> 
<a class="carousel-control-next" href="#demo" data-slide="next"> 
<span class="carousel-control-next-icon"></span> 
</a> 


23.2.4 设计 蔬菜 栏 

蔬菜 栏 和 水 果 栏 设计 基本 一 样 ， 是 使 用 Bootstrap 框架 的 警告 框 (alert) 来 设计 布局 的 。 下 
面 以 蔬菜 栏 为 例 具 体 介 绍 一 下 。 

根据 不 同 大 小 的 屏幕 设计 每 一 行 的 列 数 , 总 共有 4 条 数据 , 这 里 设计 为 “col-xs-12 col-sm-12 


col-md-6 col- 


lg-3”。 当 屏幕 宽度 大 于 960 像素 时 ， 列 数 为 4 (12/3) ， 显 示 效 果 如 图 23-13 所 


示 ; 当 屏 幕 宽度 在 大 于 768 像素 且 小 于 960 像素 时 ， 列 数 为 2 (12/6) ， 显 示 效 果 如 图 23-14 
所 示 ; 当 屏 幕 宽 度 小 于 768 像素 时 ， 列 数 为 1， 显 示 效 果 如 图 23-15 所 示 。 


| pos a 


神 吧 大 可 


Bon Be Ge mo 
图 23-13 大 于 960 像素 屏幕 的 页 面 效果 
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图 23-14 大 于 768 且 小 于 960 像素 屏幕 的 页 面 效 果 ”图 23-15 小 于 768 像素 屏幕 的 页 面 效果 
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布局 完成 后 ， 在 每 列 中 添加 提示 框 〈.alert 类 ) 并 添加 alert-success 类 ， 在 提示 框 吕 


菜 信 息 ， 有 具体 请 参考 下 面 代码 。 
CSS 样式 代码 如 下 : 


-head-tit{ 
font-size: 20px; 
line-height: S50px; 
color: black; 
border-bottom: lpx solid green; 
. 
.span-tit{ 
border-left:3px solid green; 
padding-left: 8px; 
} 
.a-titf{ 
background:#5bc0de; 
float: TInt 
display: inline; 
padding: .2em .6em .3em; 
font=size: 80%; 
font-weight: 700; 
line-height: 1; 
coOLOr: #£Ef? 
border-radius: .25em; 
margin-top: 20px; 
} 
img{ 
width: 100%; 
height: 50%; 
} 


HTML 代码 如 下 : 


<p class="head-tit"> 
<span class="span-tit"> 蔬 菜 </span> 


pi 设计 蔬 


<span class="text-success"><small> 超 过 30 元 送 盐 一 袋 </ small></span> 


<a href="buy.html" class="a-tit"> 更 多 </a> 
</p> 
<div class="row"> 


<div class="col-xs-12 col-sm-12 col-md-6 col-1g-3"> 


<a href=""> 
<div class="alert alert-success"> 
<img src="images/01.png”alt=" 羔 椒 "> 
<div> 
<h3 > 辣椒 </h3> 
<p>3.5 元 / 斤 </p> 
<p> 
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<a href="buy.html" class="btn btn-primary" 
role="button"> 购 买 </a> 
<a href="#" class="btn btn-danger™" role="button"> 
加 入 购物 车 </a> 
</p> 
</div> 
</div> 
</a> 
</div> 
<div class="col-xs-12 col-sm-12 col-md-6 col-1g-3"> 
<a href=" "> 
<div class="alert alert-success"> 


<img src="images/02.png”alt=" 西 红 柿 "> 
<div class="caption"> 
<h3> 西 红 柿 </h3> 
<p>6 元 / 斤 </p> 
<p> 
<a href="#" class="btn btn-primary" role="button"> 
购买 </a> 
<a href="#" class="btn btn-danger" role="button"> 
加 入 购物 车 </a> 
</p> 
</div> 
</div> 
</a> 
</div> 
<div class="col-xs-12 col-sm-12 col-md-6 col-1g-3"> 
<a href=""> 
<div class="alert alert-success"> 
<img src="images/03.png" alt=" 豆 角 "> 
<div class="caption"> 
<h3> 豆 角 </h3> 
<p>4 元 / 斤 </p> 
<p> 
<a href="#" class="btn btn-primary" role="button"> 
购买 </a> 
<a href="#" class="btn btn-danger" role="button"> 
加 入 购物 车 </a> 
</p> 
</div> 
</div> 
</a> 
</div> 


<qdiv Class="col xs 12 Col sm 12 col md 6 col 1q= 3"> 
<a href=""> 
<div class="alert alert-success"> 
<img src="images/04.png”alt=" 黄 瓜 "> 
<div class="caption"> 
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<h3> 黄 瓜 </h3> 
<p>3.5 元 / 斤 </p> 
<p> 
<a href="#" class="btn btn-primary" role="button"> 
购买 </a> 
<a href="#" class="btn btn-danger”" role="button"> 
加 入 购物 车 </a> 
</p> 
</div> 
</div> 
</a> 
</div> 
</div> 


23.2.5 ”设计 干果 栏 


干果 栏 也 是 采用 网 格 系统 来 设计 ， 这 里 使 用 了 网 格 系统 的 嵌 套 ， 数 据 有 4 条 。 先 是 外 层 
的 row， 根据 不 同 大 小 的 屏幕 将 每 列 设计 为 “colL-xs-12 col-sm-12 col-md-6 col-lg-6”， 然 后 在 每 
一 个 列 中 嵌 套 一 个 row。 英 套 的 row 中 又 包含 两 个 部 分 ， 左 边 是 干果 图 片 展 示 ， 根 据 不 同 大 小 
的 屏幕 将 该 部 分 设计 为 “col-xs-12 col-sm-12 col-md-12 col-lg-4”; 右边 是 干果 的 说 明 信 息 ， 设 
计 为 “col-xs-12 col-sm-12 col-md-12 col-lg-8”。 

这 样 在 不 同 大 小 的 屏幕 显示 时 ， 页 面 效 果 会 自动 响应 ， 当 屏幕 宽度 大 于 960 像素 时 ， 外 层 
的 列 数 为 2， 嵌 套 层 左 侧 占 4 份 ， 右 侧 占 8 份 ， 显示 效果 如 图 23-16 所 示 ; 当 屏 幕 宽度 大 于 768 
像素 且 小 于 960 像素 时 ， 外 层 列 数 为 2， 嵌 套 层 左 侧 占 12 份 ， 右 侧 占 12 份 ， 将 在 两 行 显示 ， 
显示 效果 如 图 23-17 所 示 ; 当 屏 幕 宽度 小 于 768 像素 时 , 外 层 列 数 变 为 1,， 媒 套 层 左 侧 占 12 份 ， 
右 侧 占 12 份 ， 显 示 效 果 如 图 23-18 所 示 。 


| 干果 让 1oo 顽 送 10 均 站 术 和 -从 


图 23-16 大 于 960 像素 屏幕 的 页 面 效果 
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| 秆 果 起 10076 关 10 元 学 胡 癌 委 


开心 果 


40 元 斤 


EE 


1 于 果 stonenofazt- 


图 23-17 


大 于 768 且 小 于 960 像素 屏幕 的 效果 


图 23-18 小 于 768 像素 屏幕 的 效果 


布局 完成 后 ,在 每 列 中 添加 了 提示 框 (.alert 类 ) 并 添加 alert-dange 类 。 在 提示 框 中 设计 干 
果 的 信息 ， 具 体 请 参考 下 面 代码 。 


CSS 样式 代码 如 下 : 


img{ 

width: 100%; 
height: 50%; 

} 

.row-imgs imgt{ 
height:91%; 

} 

.row-listf{ 
margin-left: -15px; 
: 

@media (max-width: 
.row-imgs imgt{ 
width: 100%; 
height:100%; 

} 

.row-list{ 
margin-left: 15px; 
background: white; 
| 

} 

@media (min-width: 
.row-imgs img{ 
width: 100%; 
height:100%; 

} 

.row-list{ 
margin-left: 15px; 
background: white; 


上 


767px) { 


768px)and (max-width: 


991px){ 
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-head-titi{ 
font-size: 20px; 
line-height: 50px; 
color: black; 


border-bottom: lpx solid green; 


} 
.span-titt{ 


border-left:3px solid green; 


padding-left: 8px; 
} 

.a-titt{ 
background:#5bc0de; 
Eloat: Tights 
display: inline; 


padding: .2em .6em .3em; 


font-size: 80%; 
font-weight: 700; 
line-height: 1; 
color: #fff; 
border-radius: .25em 
margin-top: 20px; 


HTML 代码 如 下 : 


<p class="head-tit"> 


站 


<span class="span-tit"> 干 果 </span> 
<span class="text-danger"><small> 超 过 100 元 送 10 元 洗衣 粉 一 袋 


</small></span> 


<a href="" class="a-tit"> 更 多 </a> 


</p> 


<div class="row row-imgs"> 
<div class="col-xs-12 col-sm-12 col-md-6 col-1g-6"> 
<div class="row"> 
<div class="col-xs-12 col-sm-12 col-md-12 col-1g-4"> 
<img src="images/1.png" alt=" 开 心 果 "> 


</div> 


<div class="col-xs-12 col-sm-12 col-md-12 col-1g-8 alert 


alert-danger row-list"> 


<div class="caption"> 
<h3> 开 心 果 </h3> 
<p>40 元 / 斤 </p> 


购买 </a> 


加 入 购物 车 </a> 


<p> 


<a href="#" class="btn btn-primary" role="button"> 


<a href="#" class="btn btn-danger" role="button"> 
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</p> 
</div> 
</div> 
</div> 
</div> 
<div class="col-xs-12 col-sm-12 col-md-6 col-1g-6"> 
<div class="row "> 
<div class="col-xs-12 col-sm-12 col-md-12 col-l1g-4"> 
<img src="images/2.png”alt=" 核 桃 "> 
</div> 
<div class="col-xs-12 col-sm-12 col-md-12 col-1g-8 alert 
alert-danger row-list"> 
<div class="caption"> 


<h3> 核 桃 </h3> 
<p>9.8 元 / 斤 </p> 
<p> 
<a href="#" class="btn btn-primary" role="button"> 
购买 </a> 
<a href="#" class="btn btn-danger" role="button"> 
加 入 购物 车 </a> 
</p> 
</div> 
</div> 
</div> 


</div> 
<div class="col-xs-12 col-sm-12 col-md-6 col-1g-6"> 
<div class="row"> 
<div class="col-xs-12 col-sm-12 col-md-12 col-1g-4"> 
<img src="images/3.png" alt=" 杏 仁 "> 
</div> 
<div class="col-xs-12 col-sm-12 col-md-12 col-1g-8 alert 
alert-danger row-list"> 
<div class="caption"> 


<h3> 杏 仁 </h3> 
<p>34 元 / 斤 </p> 
<p> 
<a href="#" class="btn btn-primary" role="button"> 
购买 </a> 
<a href="#" class="btn btn-danger" role="button"> 
加 入 购物 车 </a> 
</p> 
</div> 
</div> 
</div> 


</div> 


<div class="col-xs-12 col-sm-12 col-md-6 col-1g-6"> 
<div class="row"> 
<div class="col xs 12 Col sm 12 col md 12 col=Llg 4"> 
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<img src="images/4.png" alt=" 腰 果 "> 
</div> 
<div class="col-xs-12 col-sm-12 col-md-12 col-1g-8 alert 
alert-danger row-list"> 
<div class="caption"> 


<h3> 腰 果 </h3> 
<p>30 元 / 斤 </p> 
<p> 
<a href="#" class="btn btn-primary" role="button"> 
购买 </a> 
<a href="#" class="btn btn-danger" role="button"> 
加 入 购物 车 </a> 
</p> 
</div> 
</div> 
</div> 
</div> 
</div> 


23.2.6 ”设计 底部 栏 

底部 栏 也 是 采用 网 格 系统 来 布局 的 , 总 共有 三 部 分 , 当 屏幕 宽度 大 于 576 像素 时 , 左 侧 logo 
部 分 占 3 份 ， 中 间 说 明 部 分 占 6 份 ， 右 侧 二 维 码 部 分 占 3 份 ， 显 示 效 果 如 图 23-19 所 示 。 

当 屏 幕 宽 度 小 于 576 像素 时 ， 每 个 部 分 都 占 12 份 ， 在 3 行 显示 ， 显 示 效 果 如 图 23-20 所 示 。 


图 23-19 大 于 576 像素 屏幕 的 页 面 


关于 我 们 
VIP 会 员 


咨询 开店 


Gi 
手机 扫 - 扫 
E> 
轻松 拿 家 礼 


图 23-20 小 于 576 像素 屏幕 的 页 面 效果 
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具体 请 参考 下 面 的 代码 。 
CSS 样式 代码 如 下 : 


-bigf 
width: 80px; 
height: 80px; 
font-size: 1.4em; 
border-radius:50% 50%; 
padding: 8px 15px; 
background: white; 


font-family :华文 琥珀 ; 


} 
.footer{ 
padding: 10px Opx 15px; 
background-color: #515151; 
text-align: center; 
color: EFS 
margin: 0; 
1 
.imag{ 
width:50px; 
height: 50px; 
; 
ULLLstt 
list-style: none; 
ulLlist alf 
color: white; 
| 
HTML 代码 如 下 : 


<hr class="bg-primary"> 
<div class="footer row"> 

<div class="col-xs-12 col-sm-3 col-md-3 col-1g-3"> 

<div class="big" style="margin:auto;"> 
<a href="index.html"> 一 扫 而 空 </a> 

</div> 

</div> 

<div class="col-xs-12 col-sm-6 col-md-6 col-1g-6"> 
<ul class="ullist" style="margin:0;padding: 0;"> 


<1i><a href=""> 关 于 我 们 </a></1i> 
<1i><a href="">VIP 会 员 </a></1i> 
<1i><a href=""> 咨 询 开店 </a></1i> 
</ul> 
</div> 


<div class="col x 12 col sm 3 col md=3 col=19g 3"> 


<img src="images/erweima.png"” alt=" 二 维 码 " class="imag"> 


<p> 


<small> 手 机 扫 一 扫 </small><br><small> 关 注 一 扫 而 空 </small><br> 


<small> 轻 松 拿 豪 礼 </small> 
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</p> 
</div> 
</div> 


23.3 ”购买 页 面 设计 


购买 页 面 的 头 部 区 域 和 底部 栏 与 首页 中 的 一 样 , 这 里 就 不 再 痪 述 了 。 这 里 主要 讲 一 下 布局 、 
计算 总 钱 数 和 顾客 评价 。 

1. 布局 购买 页 面 

购买 页 面 的 布局 仍 是 采用 Bootstrap 的 网 格 系统 来 设计 ， 这 里 主要 有 三 部 分 ， 分 别 是 蔬菜 
图 片 展示 、 购买 的 信息 及 客户 的 评价 。 根据 不 同 大 小 的 屏幕 设计 每 一 行 的 列 数 , 总 共有 三 部 分 ， 
这 里 我 们 设计 为 “col-xs-12 col-sm-12 col-md-6 col-lg-4”， 当 屏幕 宽度 大 于 960 像素 时 ， 列 数 
为 3， 显示 效果 如 图 23-21 所 示 ， 当 屏幕 宽度 大 于 768 像素 且 小 于 960 像素 时 ， 列 数 为 2， 显 
示 效 果 如 图 23-22 所 示 ， 当 屏幕 宽度 小 于 768 像素 时 ， 列 数 为 1， 显 示 效 果 如 图 23-23 所 示 。 


新 鲜 辣 椒 小 米 概 超 辣 朝 天 椒 小 尖 概 小 米 七 星 椒 泰 椒 


和 
前 
3 


时 
Hi 
i 


图 23-22 大 于 768 且 小 于 960 像素 屏幕 的 页 面 效果 图 23-23 小 于 768 像素 屏幕 的 页 面 效果 


i 
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在 购买 信息 列 中 ， 使 用 了 Bootstrap 中 的 卡片 (card) 组 件 ， 并 设计 不 同 的 颜色 背景 及 文本 
频 色 。 

2. 计算 总 钱 数 

这 里 使 用 JS 来 动态 计算 总 钱 数 。 当 用 户 点 击 购买 按钮 时 ， 总 钱 数 将 显示 在 设计 好 的 模 态 
框 中 。 具 体 的 JS 代码 如 下 : 


$ (function(){ 
$("#buy") .click (function(){ 
var number=0; 
var b=0; 
if($("#ipt1") .val ()>0){ 
number=$ ("#ipt1") .val (); 
b=0.8*3.5*number+" 元 "; 
$ ("#ipt2") .text (b) 
} 
else if($("#ipt1") .val()<1){ 
$ ("#ipt2") .text ("购买 数量 不 能 为 负 ") ; 
} 
}) 
}) 


3. 顾客 评价 
通过 setInterval (定时 器 ) 可 以 将 顾客 的 评论 信息 设计 成 自动 滚动 的 效果 。 有 具体 的 JS 代码 
如 下 : 
$ (function()f{ 
// 评论 内 容 滚动 
var timer=setInterval (fn,1000) 
function fn(){ 


$("#ul") .animate ({top:"-25px"},1000, function(){ 
S$S("#ul") .css ("top",0) .find("1i:first") .appendTo ("#uln") 


)) 
} 
}) 
购买 页 面 的 CSS 样式 及 静态 页 面 代码 如 下 所 示 。 
CSS 样式 代码 如 下 : 
.head-titt{ 


font-size: 20px; 

line-height: 50px; 

color: black; 

border-bottom: lpx solid green; 
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.Size{width: 100%;height: 100%;} 
.boxl{ 
width:100%; 
height: 100%; 
overflow: hidden; 
} 
#ul{ 
list-style: none; 
position: relative; 
| 
#ul li{height: 25px;line-height: 25px;} 


HTML 代码 如 下 : 


<p class="head-tit"> 
<span class="text-success"> 新 鲜 辣椒 小 米 椒 超 羔 朝 天 椒 小 尖 椒 小 米 七 星 椒 泰 椒 
</span> 
</p> 
<div class="row"> 
<div class="col-xs-12 col-sm-12 col-md-6 col-1g-4"> 
<img src="images/01.png" alt="" class="size"> 
</div> 
<div class="col-xs-12 col-sm-12 col-md-6 col-1g-4"> 
<div class="card bg-danger text-white"> 
<div class="card-body"> 
优惠 <i style="width: 2em;display: inline-block;"></i>8 折 优惠 
</div> 
</div> 
<div class="card bg-warning text-white"> 
<div class="card-body"> 
配送 <i style="width: 2em;display: inline-block;"></i> 免 费 
</div> 
</div> 
<div class="card bg-success text-white"> 
<div class="card-body"> 
价格 <i style="width: 2emzdisplay: inline-block;"></i>3.5/ 斤 
</div> 
</div> 
<div class="card bg-info text-white"> 
<div class="card-body"> 


数量 <i style="width: 2em;display: inline-block;"></i> 
<input type="number" value="1" id="ipt1"> 
</div> 
</div><br> 


<div class="card bg-light text-white"> 
<a href="#" id="buy" class="btn btn-danger" role="button" 
data-toggle="modal" data-target="#myModal"> 购 买 </a> 
</div> 
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<!-- 模 态 框 --> 
<div class="modal fade" id="myModal"> 
<div class="modal-dialog modal-sm"> 
<div class="modal-content"> 
<!-- 模 态 框 头 部 --> 
<div class="modal-header"> 
<h4 class="modal-title"> 羔 椒 </h4> 
<button type="button" class="close" 
data-dismiss="modal">&times;</button> 
</div> 
<!-- 模 态 框 主体 --> 
<div class="modal-body"> 
总 共 价 格 <i style="width: 2em;display: 
inline-block;"></i><span id="ipt2" class="text-primary"></span> 
</div> 
<!-- 模 态 框 底部 --> 
<div class="modal-footer"> 
<button type="button" class="btn btn-primary" 
data-dismiss="modal"> 确 认购 买 </button> 
</div> 
</div> 
</div> 
</div> 
</div> 
<div class="col-xs-12 col-sm-12 col-md-12 col-1g-4 text-primary"> 
<h4> 顾 客 评论 : </h4><br> 
<div class="box1"> 
<ul id="ul"> 
<1i><p> 顾 客 1: 辣椒 很 新 鲜 ， 推 荐 购买 </p></1i> 
<1i><p> 顾 客 2: 辣椒 很 新 鲜 ， 推 荐 购买 </p></1i> 
<1i><p> 顾 客 3: 辣椒 很 新 鲜 ， 推 荐 购买 </p></1i> 
<1i><p> 顾 客 4: 辣椒 很 新 鲜 ， 推 荐 购买 </p></1i> 
<1i><p> 顾 客 5: 辣椒 很 新 鲜 ， 推 荐 购买 </p></1i> 
<1i><p> 顾 客 6: 辣椒 很 新 鲜 ， 推 荐 购买 </p></1i> 
<1i><p> 顾 客 7: 辣椒 很 新 鲜 ， 推 荐 购买 </p></1i> 
<1i><p> 顾 客 8: 辣椒 很 新 鲜 ， 推 荐 购买 </p></1i> 
<1i><p> 顾 客 9: 辣椒 很 新 鲜 ， 推 荐 购买 </p></1i> 
</ul> 
</div> 
</div> 
</div> 


23.4 ”蔬菜 展示 页 面 设计 


蔬菜 展示 页 面 的 布局 与 首页 中 的 蔬菜 栏 布局 是 一 样 的 ， 只 是 展示 了 所 有 的 蔬菜 。 蔬 菜 展示 
页 面 中 的 广告 栏 、 导 航 栏 和 底部 栏 与 首页 是 一 样 的 设计 。 具 体 代码 如 下 : 
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<p class="head-tit"> 
<span class="span-tit"> 蔬 菜 </span> 
<span class="text-success"><smal1> 超 过 30 元 送 盐 一 袋 </smal11></span> 
<a href="" class="a-tit"> 更 多 </a> 
</p> 
<div class="row show" id="rowl"> 
<div class="col-xs-12 col-sm-12 col-md-6 col-1g-3"> 
<a href=""> 
<div class="alert alert-success"> 
<img src="images/01.png”alt=" 羔 椒 "> 
<div class="caption"> 
<h3> 辣 椒 </h3> 
<p>3.5 元 / 斤 </p> 
<p><a href="buy.html" class="btn btn-primary" 
role="button"> 购 买 </a> <a href="#" class="btn btn-danger" role="button"> 加 入 购 
物 车 </a></p> 
</div> 
</div> 
</a> 
</div> 
<div class="col-xs-12 col-sm-12 col-md-6 col-1g-3"> 
<a href=""> 
<div class="alert alert-success"> 
<img src="images/02.png" alt=" 西 红 柿 "> 
<div class="caption"> 
<h3> 西 红 柿 </h3> 
<p>6 元 / 斤 </p> 
<p><a href="#" class="btn btn-primary" role="button"> 
购买 </a> <a href="#" class="btn btn-danger"” role="button"> 加 入 购物 车 </a></p> 
</div> 
</div> 
</a> 
</div> 
<div class="col-xs-12 col-sm-12 col-md-6 col-1g-3"> 
<a href=""> 
<div class="alert alert-success"> 
<img src="images/03.png" alt=" 豆 角 "> 
<div class="caption"> 
<h3> 豆 角 </h3> 
<p>4 元 / 斤 </p> 
<p><a href="#" class="btn btn-primary" role="button"> 
购买 </a> <a href="#" class="btn btn-danger" role="button"> 加 入 购物 车 </a></p> 
</div> 
</div> 
</a> 
</div> 
<div class="col xs = 12 col=sm 12. col -md=6 col= 1q3"> 
<a href=""> 
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<div class="alert alert-success"> 
<img src="images/04.png”alt=" 黄 瓜 "> 
<div class="caption"> 
<h3> 黄 瓜 </h3> 
<p>3.5 元 / 斤 </p> 
<p><a href="#" class="btn btn-primary" role="button"> 
购买 </a> <a href="#" class="btn btn-danger" role="button"> 加 入 购物 车 </a></p> 
</div> 
</div> 
</a> 
</div> 
</div> 


<div class="row hidden" id="row2"> 
<div class="col-xs-12 col-sm-12 col-md-6 col-1g-3"> 
<a href=""> 
<div class="alert alert-success"> 
<img src="images/05.png”alt=" 羔 椒 "> 
<div class="caption"> 
<h3> 茄 子 </h3> 
<p>4 元 / 斤 </p> 
<p><a href="#" class="btn btn-primary" role="button"> 
class="btn btn-danger"” role="button"> 加 入 购物 车 </a></p> 
</div> 
</div> 
</a> 
</div> 
<div class="col-xs-12 col-sm-12 col-md-6 col-1g-3"> 
<a href=""> 
<div class="alert alert-success"> 
<img src="images/06.png" alt=" 西 红 柿 "> 
<div class="caption"> 
<h3> 花 菜 </h3> 
<p>8 元 / 斤 </p> 
<p><a href="#" class="btn btn-primary" role="button"> 
class="btn btn-danger"” role="button"> 加 入 购物 车 </a></p> 
</div> 
</div> 
</a> 
</div> 
<div class="col-xs-12 col-sm-12 col-md-6 col-1g-3"> 
<a href=""> 
<div class="alert alert-success"> 
<img src="images/07.png" alt=" 豆 角 "> 
<div class="caption"> 
<h3> 木 耳 </h3> 
<p>12 元 / 斤 </p> 
<p><a href="#" class="btn btn-primary" role="button"> 


购买 </a> <a href 


购买 </a> <a href 
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购买 </a> <a href="#" class="btn btn-danger" role="button"> 加 入 购物 车 </a></p> 
</div> 
</div> 
</a> 
</div> 
<div class="col-xs-12 col-sm-12 col-md-6 col-1g-3"> 
<a href=""> 
<div class="alert alert-success"> 
<img src="images/08.png”alt=" 黄 瓜 "> 
<div class="caption"> 
<h3> 白 菜 </h3> 
<p>3 元 / 斤 </p> 
<p><a href="#" class="btn btn-primary" role="button"> 
购买 </a> <a href="#" class="btn btn-danger"” role="button"> 加 入 购物 车 </a></p> 
</div> 
</div> 
</a> 
</div> 
</div> 


23.5 ”项目 打 包 成 APP 
具体 的 打包 过 程 请 参考 第 22 章 的 “22.3 项 目 打包 成 APP” 小 节 。 
在 手机 上 安装 成 功 后 , 打开 APP, 页 面 效 果 与 前 面 项 目 效果 展示 基本 一 致 ,效果 如 图 23-24~ 
图 23-26 所 示 。 


周年 活动 来 就 送 豪 礼 ， 购 买 送 更 多 


| 蔬菜 超过 30 元 送 盐 一 盘 E33 


闵 椒 


5 元/ 乒 


图 23-24 主页 23-25 ”主页 面 导 航 栏 23-26 ”登录 注册 


第 24 章 ”项目 实 训 4 一 一 开发 游戏 APP 


本 章 将 介绍 一 款 经 典 的 小 游戏 《 打 地 鼠 》， 它 是 由 HTML5、CSS 和 JavaScript 等 语言 技 
术 共 同 完成 的 。 在 小 游戏 开发 中 ， 主 要 使 用 了 HITMLS 中 的 canvas 元 素 。canvas 元 素 可 以 使 浏 
览 器 直接 创建 并 处 理 图 像 ， 减轻 开发 人 员 的 负担 ， 还 可 以 使 界面 更 加 优美 ， 提 高 用 户 体验 。 
HTMLS 开发 网 站 和 游戏 已 经 不 容 忽视 ， 不 论 动画 细节 还 是 运行 效率 都 很 棒 ， 将 来 会 有 很 好 的 
前 景 。 下 面具 体 介绍 一 下 小 游戏 《 打 地 鼠 》。 


24.1 游戏 概述 


《 打 地 鼠 》 游 戏 是 一 个 趣味 性 的 小 游戏 ， 游 戏 开 始 后 ， 地 鼠 会 从 一 个 个 地 洞 中 随意 出 现 ， 
出 现 的 时 间 有 限 ， 要 在 限定 的 时 间 内 把 它 消 除 ， 每 消除 一 个 加 一 分 ， 若 没 在 限制 的 时 间 内 消除 
地 鼠 ， 则 地 鼠 逃 生 ， 你 将 失去 一 条 命 ， 每 一 次 游戏 共有 三 条 命 。 当 有 三 个 地 鼠 逃 生 时 ， 游 戏 结 
束 。 
24.1.1 游戏 结构 目录 

本 项 目的 目录 结构 如 图 24-1 所 示 。 


总 stylecss 
v Mimage 
四 ds.png 


v Mjs 


总 indexjs 


图 24-1 目录 结构 
具体 内 容 如 下 。 


(1) css 文件 夹 : 包含 项 目的 样式 文件 style.css。 
(2) image 文件 夹 : 项 目 使 用 的 图 片 。 
(3) js 文件 夹 : 包含 项 目的 JS 文件，indexjs 文件 包含 游戏 规则 的 具体 设计 内 容 。 
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(4) index.html: 游戏 主页 面 。 


24.1.2 ”项 目 效果 演示 

本 项 目 使 用 Opera Mobile Emulator 模拟 器 来 展示 效果 。 打开 模 拟 器 , 选择 “Amazon Kindle 
Fire” 启 动 ， 把 index.html 文件 拖 入 模拟 器 ， 游 戏 直接 开始 ， 页 面 效果 如 图 24-2 所 示 。 这 时 只 
需要 用 鼠标 点 击 出 现 的 地 鼠 以 消除 ， 每 消除 一 只 地 鼠 加 一 分 ， 如 图 24-3 所 示 。 随 着 消除 地 鼠 
的 增加 ， 地 鼠 出 现 的 间隔 时 间 会 越 来 越 短 ， 游 戏 难度 也 会 增加 ， 游 戏 得 分 就 各 凭 本事 了 。 当 三 
次 机 会 都 用 使 用 完 后 ， 会 弹出 消除 的 地 鼠 数量 ， 如 图 24-4 所 示 。 


Amazon Kinc 600x874 ppl: 169 Ds 50% Amazon Kinc 600x874 PPl 169 Ds 50% ~ Amazon Kinc 600x874 PPI:169 D3 50% 


图 24-2 ”游戏 主页 面 24-3 ”开始 游戏 图 24-4 ”游戏 结束 


24.2 游戏 设计 


《 打 地 鼠 》 游 戏 是 在 Opera Mobile 模拟 器 上 调试 开发 的 。 实 现 《 打 地 鼠 》 游 戏 ， 用 到 了 
HTML5、JavaScript、CSS3、canvas 等 技术 。 下 面 来 看 一 下 实现 的 代码 。 


24.2.1 index.html 文件 
index.html 是 项 目的 主页 面 ， 代 码 比 较 简洁 。 有 具体 的 代码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1, maximum-scale=1, 
user-scalable=no"> 
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<meta charset="UTF-8"> 
<title>HTML5 打 地 鼠 </title> 
<link rel="stylesheet" href="css/style.css"> 
</head> 
<body> 
<h2> 打 地 鼠 游 戏 </h2> 
<h3> 得 分 :0</h3> 
<h3> 生 命 :3</h3> 


<div></div> 

<canvas id="myCanvas"></canvas> 
</body> 

<script src="js/index.js"></script> 
</html> 


24.2.2 ”style.css 文件 
style.css 是 项 目的 样式 文件 ， 具 体 的 代码 如 下 : 


a 
padding: 0; 
margin: 0; 

} 

body{ 
text-align: center; 
background-color: cornsilk; 
overflow: hidden; 

} 

h21{ 
font-size: 40px; 
margin-top: S50px; 

} 

h3{ 
margin-top:20px; 
color: #4f5bff; 

} 

img{ 
position: absolute; /* 绝 对 定位 */ 
Width: 33.33%; 
max-width: 300px; /* 最 大 宽度 */ 
max-height: 300px; /* 最 大 高 度 */ 
transform: scale(0); 
-Webkit-transform: scale(0); 
transition: all .5s ease-out; 
-Webkit-transition: all .5s ease-out;/* 地 和 鼠 出 现 的 动画 */ 

} 

-activef{ 
transform: scale(1); 
-Webkit-transform: scale(1); 
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} 
canvas,div{ 
position: absolute; 
left: 50%; 
width: 72%; 
height: auto; 
max-width: 400px; 
max-height: 400px; 
transform: translate(-50%,0%); 
-Webkit-transform: translate(-50%,0%);/* 居 中 */ 
margin-top: 50px; 
} 
div{z-index: 1;} 
#temp{ 
position: fixed; 
top: 200%; 
left: 200%; 
transform: scale(0.1); 
-Webkit-transform: scale(0.1); 


} 
24.2.3 indexjs 文件 
indexjs 文件 是 游戏 规则 的 设计 内 容 ， 具 体 请 看 下 面 的 代码 及 注释 。 


Var canvas = document .getElementById ("myCanvas"); // 获 取 canvas 
canvas.width = 800; // 设 置 canvas 的 宽度 

canvas.height = 800;  // 设 置 canvas 的 高 度 

var cubes = 3; 

var ctx = canvas.getContext ("2d"); // 设 置 canvas 的 绘制 环境 
ctx.fillstyle = "#6fcd44"; // 填 充 canvas 的 颜色 


var areaSize = 800/cubes; 
var cubeSize = areaSize*0.96; 
ctx.translate (areaSize*0.02,areaSize*0.02); 


var rats = []; // 放 地 鼠 的 数组 


Var scores; // 得 分 

var life; // 生 命 

var interval; // 产 生地 鼠 的 间隔 时 间 
Var 七 七 27 


window.onload = function(){ 
drawPannel () ; // 游 戏 中 的 方 格 是 用 canvas 画 的 
initGame (); ”// 初 始 化 游戏 
于 
function initGame (){ 
scores = 0;// 得 分 
life = 3;// 3 次 机 会 
interval = 100;// 地 鼠 出 现 的 间隔 时 间 
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document .getElementsByTagName ("h3") [0]. innerHTML=" 得 分 :"+scores; 
document .getElementsByTagName ("h3") [1]. innerHTML=" 生 命 :"+1ifey 
t = setInterval (function ()1{ 
generateRats (); // 产 生地 鼠 的 方法 
maintanceRats () ;  // 维 护 地 和 鼠 的 方法 
},interval); 
} 
function drawPannel () {// 画 出 方 格 ， 每 个 方 格 放 一 个 地 鼠 并 且 隐 藏 
for (var i=0;i<cubes;i++){ 
for (var j=0;j<cubes;j++){ 
ctx.fillRect (i*areaSize,j*areaSize,cubeSize, cubeSsize) ;// 画 一 个 


方 格 

var img = new Image(); 

img.src = "image/ds.png"; 

img.style.left = i*33.33 + "%"; 

img.style.top = j*0.3333*canvas.clientHeight + "px"; 

// console.log(canvas.clientHeight); 

img.addEventListener ("mousedown",clicked); 

img.addEventListener('touchstart'，touched) ;// 两 种 事件 是 为 了 适 配 
不 同 的 移动 设备 

document .getElementsByTagName ("div") [0] .appendChild (img);// 每 
个 方 格 放 地 和 鼠 


rats.push (img) ;// 地 鼠 放 入 队列 中 ， 用 于 后 面 维护 


} 
; 
function touched() {// 触 摸 中 了 
chosen (this); 
} 
function clicked() {// 点 击 中 了 
chosen (this); 
} 
function chosen (rat){ 
if(rat.className == "active"){// 如 果 地 鼠 显示 出 来 了 
rat.classList.remove ("active");// 隐 藏 
scores ++;// 加 分 
document .getElementsByTagName ("h3") [0] .innerHTML = "得 
分 :"+scores;// 更 新 显示 分 数 
interval -= interval*0.03>2?interval*0.03:interval*0.015;// 增 加 游戏 
难度 
3 
1 
function generateRats () {// 产 生地 鼠 的 方法 


if (parseInt (Math.random()*100)sparseInt(((interval/12)>2?(interval/12) :2) )= 
=0){// 产 生 的 几率 越 来 越 大 


var ID = Math.ceil (Math.random()*8); 
if(rats[ID] .className == ""){// 如 果 没 有 出 现 


E537 。 
7 


HTML5+CSS3+jQuery MobiletBootstrap 开发 APP 从 入 门 到 精通 〈 视 频 教 学 版 ) 


t2 = setTimeout (function() {// 则 调用 定时 器 方法 ， 让 它 出 现 
rats[ID] .classList.add("active"); 
rats[ID] .id= interval/4;// 用 id 表示 地 鼠 自 动 消失 的 时 间 ， 与 游戏 难度 
相关 
},500); 


} 
} 
function maintanceRats (){// 维 护 地 鼠 的 方法 
var activeRats = document .getElementsByClassName ("active");// 获 取 所 有 
出 现 的 地 鼠 
for (var i=0;i<activeRats.length;i++){// 用 id 表示 剩余 时 间 
activeRats [i] .id--—; 
if(activeRats [i] .id<0){// 如 果 到 时 间 了 
activeRats[i] .classList.remove ("active");// 则 当前 地 鼠 隐 藏 
life --;// 掉 血 
interval *= 1.08;// 回 退 一 点 游戏 难度 
document .getElementsByTagName ("h3") [1] .innerHTML = " 生 
命 :"+1ife;// 更 新 血 量 显示 
if(life == 0){ 
lose(); // 如 果 生 命 为 零 ， 则 结束 游戏 
} 


} 
} 
function lose() {// 如 果 输 了 
clearInterval (t) ;// 则 停止 计时 器 ， 等 待 游戏 重新 开始 


clearTimeout (t2); 
setTimeout (function () {// 延 时 一 点 
alert ("您 输 了 ， 共 打 了 "+scores+" 只 地 鼠 。")，; 
for (var i=0;i<rats.length;i++){ 
rats[i] .classList.remove ("active");// 全 部 地 鼠 隐藏 
} 
setTimeout (function(){ 
initGame () ; // 重 新 开始 游戏 
},500) ;// 延 时 ， 等 待 地 鼠 隐藏 的 动画 效果 结束 
},10); 


24.3 ”项目 打包 成 APP 


具体 的 打包 过 程 请 参考 第 22 章 的 “22.3 项 目 打包 成 APP” 小 节 ， 步 又 基本 一 致 。 
在 手机 上 安装 成 功 后 ， 打 开 APP， 页 面 效 果 与 前 面 项 目 效 果 展 示 基 本 一 致 ， 如 图 24-5~ 图 
24-7 所 示 。 
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图 24-5 游戏 主页 面 


打 地 鼠 游 戏 


您 输 了 ， 共 打 了 11 只 地 地 。 


图 24-6 开始 游戏 图 24-7 结束 游戏 
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